Vue Vuex 综合使用

Question

1. 表单处理

双向绑定的计算属性

<template>
    <input v-model="message" />
</template>
<script>
    computed:{
        message:{
            get(){
                return this.$store.state.obj.message
            },
            set(value){
                this.$store.commit('updateMessage', value)
            }
        }
    }
</script>

2. 严格模式

在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。 这能保证所有的状态变更都能被调试工具跟踪到。

注意： 不要在发布环境下启用严格模式！

严格模式会深度监测状态树来检测不合规的状态变更——请确保在发布环境下关闭严格模式，以避免性能损失。

类似于插件，我们可以让构建工具来处理这种情况：

const store = new Vuex.Store({
    //...
    strict: process.env.NODE_ENV !== 'production'
})
Vue.config.productionTip = process.env.NODE_ENV === 'production';

3. 项目结构

规定了一些需要遵守的规则：

1. 应用层级的状态应该集中到单个 store 对象中。
2. 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
3. 异步逻辑都应该封装到 action 里面。

只要你遵守以上规则，如何组织代码随你便。如果你的 store 文件太大，只需将 action、mutation 和 getter 分割到单独的文件。

对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例：参考 购物车示例 。