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

前言

以前的基础篇里面咱们学习过了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作的事情实际上时直接赋值，这样的再严格模式下是不容许的。

---

结束：

vuex的基础学习到这一片就已经所有的结束了，以后的的源码阅读和使用记录将会陆续的推出，共同窗习共同进步，下篇文章再见，拜拜。