Vuex — 更多
最后更新于：2022-04-02 08:09:54
>[success] # Vuex--Module
~~~
1.Module可以让单一状态树拆分成多个模块，每个模块可以拥有state、mutation、action、getter，甚至嵌套子模块。
2.在使用模块里的数据时，可以通过$store.模块名.state状态属性名的方式访问
3.在使用模块里的方法时，可以通过`$store.commit('mutation方法名')`的方式提交mutation
4.当想要有更强的封装性时，可以开启命名空间，在导出的模块对象里增加一个namespaced属性为true，
然后就可以在Vue中使用`mapState('模块名', ['state状态属性名'])`的方式获取到属性名称，使用`mapMutations
('模块名', ['mutation方法名'])`的方式获取到方法名。namespaced: true 开启模块名
~~~
>[success] # 严格模式
~~~
1.Vuex中的状态的更新要通过提交mutation来修改，但其实在组件中还可以通过$store.state.msg进行修改
从语法从面来说这是没有问题的，但是这破坏了Vuex的约定，如果在组件中直接修改state，devtools无法跟踪
到这次状态的修改。
2.开启严格模式之后，如果在组件中直接修改state会抛出错误，但数据仍被成功修改。
3.如何开启：在store中增加一个属性strict为true，" strict: process.env.NODE_ENV !== 'production' " 在生产模式
不建议开启严格模式，严格模式请在开发环境使用原因'严格模式会深度检查状态树，检查不合规的状态改变，会影响性能'
~~~
>[success] ##### 一个简单的vuex模型
~~~
let _Vue = null
class Store {
constructor (options) {
const {
state = {},
getters = {},
mutations = {},
actions = {}
} = options
this.state = _Vue.observable(state)
this.getters = Object.create(null)
Object.keys(getters).forEach(key => {
Object.defineProperty(this.getters, key, {
get: () => getters[key](state)
})
})
this._mutaions = mutations
this._actions = actions
}
commit (type, payload) {
this._mutaions[type](this.state, payload)
}
dispatch (type, payload) {
this._actions[type](this, payload)
}
}
function install (Vue) {
_Vue = Vue
_Vue.mixin({
beforeCreate () {
if (this.$options.store) {
_Vue.prototype.$store = this.$options.store
}
}
})
}
export default {
Store,
install
}
~~~
';