Vuex

Vuex

vuex可以集中式管理所有组件的状态(singleton)

 

Vue.use(Vuex)

调用了Vuex对象的install方法，并给install方法传入Vue。

用户可以通过applyMixin或者Minxin或者hook vue.prototype._init方法来获取到用户传入的options

甚至添加一些方法等等。

 

 

Vuex内部原理

内部实例化了一个vue实例来实现响应式

// 实际代码
new Vuex.Store({
    state: {
        msg: 111
    }
})


// 内部操作
new Vue({
    data: {
        $$state: { // 因为不需要将data代理到vue实例上，所有用了$
            msg: 111
        }
    }
})

至于getters也是通过vue中method来实现的

 

 

如何修改vuex的状态

1. 通过this.$store.state.xx = "changed"(非严格模式下)

2. 通过mutation

 

 

为什么推荐使用mutation来修改状态

其实是为了更好的调试。在调用mutation方法时，vuex会记录之前的状态与修改之后的状态。(vue devTool插件)

 

 

Vuex是怎么知道状态并非通过mutation来修改的？

commit方法提交修改的时候会有个_iscommitting标记位。提交之前是true，提交完毕变成false。

Vuex可以watch下state，如果state修改了，就看看标记位是不是true，不是的话，那么肯定是直接修改的state。

 

 

如何得知action调用结束？

可以在action里返回一个Promise。

 

有些观点认为action都会提交mutation的，所以看看mutation是否被调用即可。

我认为不妥，其一是mutation可能并非在action的最后一步调用。

其二是观察mutation的函数是否被调用不太好实现。得hook了，侵入性强。