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 } ~~~
';