vuex进阶篇 -- plugins和严格模式_javascript_weixin

前言

之前的基础篇里面我们学习过了vuex基础的内容，今天我们来升华一下。

plugins

插件其实就是vuex的一些与设定的初始化时期运行的内容，所以我们可以知道plugins是一个函数内容，其中的第一个参数内容是store对象内容，方便插件对于store对象的调用。同时我们可以通过store之中的subscribe方法，这个方法注册了一个mutation的后置处理切面（感觉像是截胡）。此方法需要传递一个函数作为参数，这个函数之中有两个参数内容分别是mutation对象和state对象。其中mutation对象的格式是{type, payload}，state则是修改完成之后的state内容。先看一个简单的插件内容吧

export default (store) => {
    console.log(store);
    store.subscribe((mutation, state) => {
        console.log(mutations);
        console.log(state)
    })
}
复制代码

这样在vuex初始化的时候在控制台打印store的内容，然后在我们每次提交mutation的时候将会在控制台打印mutation和state的数据内容。编写好插件之后，我们可以通过在store的管理对象中添加plugins关键字，传递一个数组的方式来引用插件。

接下来我们说一说插件的几种巡查使用：

1.有的时候我们需要做改变前后的state的比对，我们可以通过插件来进行，简化代码如下：

(store) => {
    let preState = _deepClone(store.state);
    store.subscribe((mutation, state) => {
        let nextState = _deepClone(state);
        ...
        preState = nextState
    })
}
复制代码

通过存储state内容的快照信息，我们将可以比对内容变更，依据变更来实现部分逻辑。

2.经常我们需要存储号我们的vuex数据，因为vue的页面展示变更时不以页面刷新来进行的，如果用户习惯性的点击刷新按键，没有存储当前vuex之中的数据的时候会导致数据的重新初始化，这样将会严重的影响当前用户的使用体验的。这个时候数据缓存的工作实际上就可以交由plugin来做了，这里上一段简单的缓存代码：

(store) => {
    if(localStorage.state) store.replaceState(JSON.parse(state))
    store.subscribe((mutation, state) => {
        localStorage.state = JSON.stringify(state);
    )
}
复制代码

这样我们就可以很完好的保存当前数据内容的形式了，方便之后用户的刷新和使用。

3.使用插件来进行日志的记录。数据展示的改变需要依据状态的改变，状态的改变需要通过mutation的操作，而mutation的操作之后就是我们记录日志的时候，所以也是常常使用的功能之一。当然我们的vuex已经有自带的createLogger日志插件了，如果你使用vue-devtool完全可以不用这一插件了。createLogger的使用可以查看一下vuex官网的相关部分（点击这里），这里我就不细说了。

当然上面提及的三种只是很少量的部分，我们可以使用的方式实际上还是有很多的，有待于每一个开发人员去发现和想象。

严格模式

严格模式需要在根状态管理对象上面添加strict:true的设置。这样我们需要严格的按照vuex的状态修改过程进行状态的修改，再使用直接状态变量赋值的形式来修改的话将会报错。每一次的状态修改都需要通过mutation来进行实现。当然这个模式只是为了让我们的代码更加的严谨，再生产环境下，我们不望有相关的错误展示，则会关闭掉严格模式。所以我们一般再代码之中进行设置的时候会设置成如下形式：

strict: process.env.NODE_ENV === "development"
复制代码

这样再打包成为product环境下的时候，我们可以不用再对代码做出修改了。

当然再我们使用严格模式的时候有一些情况下，语法糖将会不再便利。例如v-model。这之后将不能再直接和state之内的状态有任何的直接的关联关系，我们需要通过绑定值和事件的形式，或者通过setter和getter来进行内容的绑定使用。因为直接使用关联的话，v-model做的事情实际上时直接赋值，这样的再严格模式下是不允许的。