项目结构

项目构建必须遵守的规则

1. 将应用层级的状态保存在单个store中
2. mutations是唯一能改变状态的方式，并且需要是异步
3. 异步处理应该写在actions中

下面是推荐的项目结构

项目结构

插件

store 接受 plugins 选项，插件可以暴露 mutations 的钩子函数。同时，插件其实就是一个函数，该函数接受 store 作为唯一参数。

基本用法

// 插件，结合箭头函数

// 插件在store初始化之后调用
var myPlugins = store => {

    // 每次 mutation 之后调用
    store.subscribe((mutation,state)=>{
        // mutation 的形式为 {type,payload} 
    });

}

// 插件的使用

var store = new Vuex.Store({
    ...
    plugins: [myPlugins]
});

插件内提交Muatioins

插件中不允许直接修改state，因此也需要使用Mutations。该例子结合了websocket

// 该插件完成了一个功能，实现客户端和服务端通信

// 闭包，创建
function createPlugin (scoket) {
    return store => {
        // 当服务器向客户端发送数据之后，客户端更新state上数据
        scoket.on('data',data => {
            store.commit('receiveData',data);
        }
        // 当mutations 被触发之后，该方法执行，此时，判断执行的方法是什么，然后对某些方法再做处理
        store.subscribe((mutation,state)=>{
            if (mutation.type === 'UPDATE_DATA') {
                scoket.emmit('update',mutation.payload)
            }
        });
    }
    const myPlugins = createPlugin(
    const store = new Vuex.Store({
    state: {},
    plugins: [myPlugins]
});

生成state快照

在开发环境中，有使用需要生成state快照，这样可以比较state前后状态

const createSnapshotPlugin = store => {
    let oldState = _.cloneDeep(store.state)
    store.subscribe((mutation,state) => {
        let nowState = _.cloneDeep(state);
        // 做完操作之后，再将新值赋值给旧值
        oldState = nowState;
    });
}


// 但是该插件只需要在开发环境中使用
const store = new Vuex.Store({
    state,
    plugins: progress.env.NODE_ENV !== 'production' ? [createSnapshotPlugin] : []
});

严格模式

1. 不要在发布环境中使用严格模式
2. 使用严格模式，只需要在store中添加stric:true。只要状态变更且不是由 mutation 函数引起的，就会报错

表单处理

表单处理，在v-model时，如果改变的时store中的状态会报错

使用 getter 和 setter 进行处理

computed: {
    comp: {
        get: function () {
            return this.$store.state.obj.msg
        },
        set: function (val) {
            this.$store.commit('updateMessage',val);
        }
    }
}

不是用v-model语法糖，绑定到数据和事件上

这种方式中，其实就是将store的状态先传递给computed,这一步是为了显示。再在methods中调用commit触发store的mutations，这一步阻止报错。

<input :value="message" @input="updateMessage">

// ...
computed: {
  ...mapState({
    message: state => state.obj.message
  })
},
methods: {
  updateMessage (e) {
    this.$store.commit('updateMessage', e.target.value)
  }
}

模块中的 store 和组件中 使用

注意在Vue实例和模块中触发各个方法的方式相同。而在组件中，一般使用解绑的方式

1. 通过namespace文件，为各个 store 模块命名
2. 在 store 模块中，引入命名空间，对各种方法名进行拼接，并且导出
3. 在组件中，导入Vuex的各种绑定辅助函数，在computed和methods中分别绑定
4. 其他模块中如果有context，或者组件使用store引入，那么使用store.commit(GET_HTTPS);即可