>[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 } ~~~