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

Question

第三天我就受苦了。请帮帮我。在 vuex.js 中如何将输入的文本保存到“store”中的输入中，然后将其添加到同一输入本身的 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;
        }
    }
});

Answer 1

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

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

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

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

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

对于另一边，你有这个: 状态=>组件计算属性中的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 文档 mutations和 state