vuex 存储的数据不是相应式的

Question

// store
export default new Vuex.Store({
    state,
    mutations,
    modules: {
        car: {
            store: { cost: 'xxxx' }
        }
    },
    strict: false    
})
// home.vue
<input v-model="cost">

computed: {
    ...mapState({
        'cost': state => state.car.cost
    })
}

问题是: 在页面上, input 组件可以拿到初始值 xxxx, 然后就是重新输入时, cost的值没有变化, 也就是不会响应. 但是我在其他模块也是同样的写法, 却是可响应的. 对比之后也没发现有啥不同...

---

feedback1: vuex 文档中有指出

当在严格模式中使用 Vuex 时，在属于 Vuex 的 state 上使用 v-model 会比较棘手

可我关闭了严格模式了...
然后照文档描述, 使用 setter 后, 数据是可相应的,
问题是: 在页面中有许多个 input需要绑定时该如何处理

---

feedback2:

改变 store 中的状态的唯一途径就是显式地提交(commit) mutations

这是文档指出的,

// store.js
// 我使用了个对象包起 cost, 这回又可以响应了
data: {
    cost: 'xxxx'
}
// home.vue
<input v-model="test.cost">
computed: {
    test () {
        return this.$store.state.car.data
    }
}

Answer 1

你的写法是不规范的，非常建议仔细看看vuex的官方文档。

修改vuex store中的数据必须使用commit。这是官方文档上面明确要求的！

你那样直接做v-model关联，vuex是跟踪不到变化的，所以感觉没有响应式。

vuex 在一开始就强调了禁止直接修改：
https://vuex.vuejs.org/zh-cn/getting-started.html