第一种方法:直接 给 中绑定 value,然后侦听 input 或者 change 事件,在事件回调中调用一个方法通过 commit 方法委派给 mutation 执行来修改 Vuex 中的数据。
第二种:
在Vue中,我们可以使用"v-model"指令将表单元素的值和Vue实例的数据进行双向绑定。如果你想将"v-model"与Vuex的actions进行绑定,可以按照以下步骤进行操作:
- 首先,确保已经正确地设置了Vuex的store,并定义了相应的state、mutations、actions和getters。
- 在组件中,使用"v-model"绑定表单元素的值到一个本地的data属性。
- 在组件中使用计算属性或者方法,将本地的data属性和Vuex的state进行关联。
- 在计算属性或者方法中使用Vuex的commit方法或者dispatch方法来触发相关的mutations或者actions。
<template> <div> <input v-model="inputValue" type="text"> <button @click="updateValue">提交</button> </div> </template> <script> import { mapActions } from 'vuex'; export default { data() { return { inputValue: '', }; }, methods: { ...mapActions(['updateData']), updateValue() { this.updateData(this.inputValue); this.inputValue = ''; // 清空输入框的值 }, }, }; </script>