javascript - 如何在 vuex.js 中将输入中输入的文本保存在“存储”中？我在哪里做错了？

Question

我受苦第三天。请帮帮我。vuex.js中如何将输入到input中的文本保存在“store”中，然后添加到同一个input本身的Value中。

我正在尝试这样做，但在某个地方我犯了一个错误。

HTML

<f7-list-input
  label="Username"
  name="username"
  placeholder="Username"
  type="text"
  :value="newUserName"
  @input="username = $event.target.value"
  required validate
  pattern="[3-9a-zA-Zа-яА-ЯёЁ]+"
  v-model="saveUserName"
/>

脚本

export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    signIn() {
      const self = this;
      const app = self.$f7;
      const router = self.$f7router;
      router.back();
      app.dialog.alert(`Username: ${self.username}<br>Password: ${self.password}`, () => {
        router.back();
      });
    },
    saveUserName(){
        this.$store.commit(saveName);
    }
  },
  computed:{
     userName(){
         return this.$store.state.newUserName;
     }
  }
};

店铺

export default new Vuex.Store({
    state:{
        userNameStor: 'newUserName',
        userPasswordStor:''
    },
    mutations:{
        saveName(state){
            userNameStor:newUserName;
            return newUserName;
        }
    }
});

标签： javascriptvue.jsvuex

Answer 1

让我们解释一下整个功能，然后是一些代码。

输入位于组件的模板部分。

该组件还包含一个脚本部分，它根据模板事件等触发代码。组件代码可以触发突变（用于状态更改），这是您在商店中存储内容的方式。

你有这个屏幕来存储流量：

1/ 组件模板事件 => 2/ 组件脚本代码 => 3/ 在存储上执行突变

另一方面，你有这个：组件计算属性中的 state => mapMutation => 组件模板。

在组件脚本中，您可以将存储值映射到组件的计算属性（使用 mapMutations 助手）。然后从组件计算属性映射到模板中的该字段。

1 - 您的模板@input 是用户操作更改输入时发生的事件。:value 是输入的值，以编程方式定义。v-model 是同时使用 @input 和 :value 的捷径。不要将它与 :value 和 @input 一起使用。

好的最小模板：

<f7-list-input
  type="text"
  :value="username"
  @input="changeUsername"
/>

在脚本中，您只需要将 changeUsername 方法链接到突变（使用 mapMutation），并定义一个名称为 username 的计算属性，它是来自商店的用户名映射（使用 mapState）。

import {mapState, mapMutations} from "vuex"

   export default {
      methods:{
         ...mapMutations({
        changeUsername:"saveName"
      },
      computed:{
         ...mapState({
            username:state=>state.username
        }),
      }
    };

考虑查看有关此突变和状态的 Vue 文档