[TOC] >[success] # Vuex進階 <br/> >[success] ## 插件 在 **Vuex** 里可以使用 **插件** ，接下來我們定義一個 **持久化存儲插件** 。 **持久化存儲插件**：當每次 **刷新瀏覽器** 時， **store** 里存儲的狀態都會被 **重新被清除** ，因為它是 **存在內存中** 的，而 **不是存在本地的** ，一刷新就沒了，但是有時候我們 **希望將一些東西存在本地**，這樣用戶一 **刷新頁面，內容不會丟失** 。 1. 首先在 **store文件夾** 中創建一個 **plugin**文件夾，然后在里面創建一個 **saveiInLocal.js** **store/plugin/saveiInLocal.js** ~~~ /** * 持久化儲存插件：這個函數會在每次store實例初始化時調用。刷新瀏覽器后第一次要做的操作可以定義在這里 * @param store */ export default store => { // 如果本地存儲了state，就把這個stateJSON字符串轉換成對象，替換到當前store實例的state if(localStorage.state) store.replaceState(JSON.parse(localStorage.state)) store.subscribe((mutation, state) => { // 提交commit提交mutation之后執行這里，把state轉換成JSON字符串儲存到localStorage的state中 localStorage.state = JSON.stringify(state) }) } ~~~ 2. 在 **store/index.js** 中 **引入插件** **store/index.js** ~~~ import Vue from 'vue' import Vuex from 'vuex' import state from './state' import getters from './getters' import mutations from './mutations' import actions from './actions' import user from './module/user' import saveiInLocal from './plugin/saveiInLocal' // 1. 引入插件 Vue.use(Vuex) export default new Vuex.Store({ state, getters, mutations, actions, modules: { user }, plugins: [ saveiInLocal ] // 2. 添加到這里 }) ~~~ 3. **使用插件** **store.vue** ~~~ <template> <div> <p>app名稱： {{ appName }}</p> <button @click="handleAppName">修改app名稱</button> </div> </template> <script> export default { computed: { appName: function(){ return this.$store.state.appName } }, methods:{ handleAppName(){ this.$store.commit('SET_APP_NAME', '看云app') } } } </script> ~~~ 只要頁面執行了 **commit** 觸發了 **mutation** ，刷新瀏覽器 **state** 的值 **始終都會存在** ，這里 **需要注意：何時清空持久化的數據** ，除了持久化數據的插件，也可以到網上找到 **其他的插件** 使用。 >[success] ## 嚴格模式 **嚴格模式** 實際上是我們平時在開發中對規范的一個要求，例如我們之前講過 **store** 里的 **state** 必須通過提交一個 **mutation** 來 **修改state** ，不能通過 **賦值方式** 來 **修改state**。 1. **使用嚴格模式** 只需要在 **store/index.js** 的配置項中添加 **strict:true** 即可開啟 **嚴格模式** **store/index.js** ~~~ import Vue from 'vue' import Vuex from 'vuex' import state from './state' import getters from './getters' import mutations from './mutations' import actions from './actions' import user from './module/user' import saveiInLocal from './plugin/saveiInLocal' Vue.use(Vuex) export default new Vuex.Store({ strict: true, // 開啟嚴格模式 state, getters, mutations, actions, modules: { user }, plugins: [ saveiInLocal ] }) ~~~ 2. 如果開啟了 **嚴格模塊** ，在頁面中以 **賦值方式修改state** ，會 **拋出錯誤警告** ， **如果設置成 false 或者不設置 strict 就代表不是嚴格模式不會報錯** 2.1 **非嚴格模式** **store.vue** ~~~ <template> <div> <p>app名稱： {{ appName }}</p> <button @click="handleAppName">修改app名稱</button> </div> </template> <script> export default { computed: { appName: function(){ return this.$store.state.appName } }, methods:{ handleAppName(){ this.$store.state.appName = '看云app' } } } </script> ~~~ 在 **非嚴格模式** 中這樣以 **賦值方式直接修改state** 是可以修改，但是 **不推薦，不規范** 。 2.2 **嚴格模式**  在 **嚴格模式** 下雖然說修改成功了，但是還會 **拋出錯誤警告** ，意思是建議用提交 **mutations** 方式來修改 **state** 。 2.3 **生產模式（正式環境）** 中 **關閉錯誤提示** 我們希望在 **生產模式** 下即便是犯了這種小錯誤，也 **不允許錯誤在瀏覽器中彈出**， 該如何配置呢，如下： ~~~ import Vue from 'vue' import Vuex from 'vuex' import state from './state' import getters from './getters' import mutations from './mutations' import actions from './actions' import user from './module/user' import saveiInLocal from './plugin/saveiInLocal' import { Progress } from 'element-ui' Vue.use(Vuex) export default new Vuex.Store({ strict: process.env.NODE_ENV === 'development', // 當前環境為開發環境時開啟嚴格模式 state, getters, mutations, actions, modules: { user }, plugins: [ saveiInLocal ] }) ~~~ >[success] ## Vuex + 雙向綁定 比如我們的 **組件** 上綁定的 **v-model** 不是 **data** 中的 **變量** ，而是 **Vuex** 中 **state** 的一個 **變量**，**v-model** 我們都知道是一個 **語法糖**， 相當于 **@input** 跟 **:value** 的一個 **簡寫** ，所以在 **v-model** 上綁定 **Vuex** 中 **state** 的值，相當于 **通過賦值的方式修改 Vuex 中 state 的值** ，這種方式 **不規范** 并且在 **嚴格模式下還會報錯** >[success] ### v-model拆分實現（@input + :value） 1. 首先在 **父組件** 中引入 **子組件AInput** **store.vue** ~~~ <template> <div> Vuex中的值：{{ stateValue }} <a-input :value="stateValue" @input="handleStateValueChange"/> </div> </template> <script> import AInput from '_c/AInput.vue' export default { components: { AInput }, computed: { stateValue: function(){ return this.$store.state.stateValue } }, methods: { handleStateValueChange(value){ // change時提交mutation修改Vuex this.$store.commit('SET_STATE_VALUE', value) } } } </script> ~~~ 2. **子組件** 寫法 **AInput.vue** ~~~ <template> <input @input="handleInput" :value="value"> </template> <script> export default { name: 'AInput', props: { value: { type: [String, Number], default: '' } }, methods: { handleInput(event){ const value = event.target.value // 獲取input的值 this.$emit('input', value) // 把value傳給父組件 } } } </script> ~~~ 3. 在 **state.js** 中定義 **stateValue** 變量 **store/state.js** ~~~ const state = { stateValue: 'abc' } export default state ~~~ 4. 在 **父組件** 中 **觸發change事件時** ，通過 **commit** 提交一個 **mutation** 方法，來修改 **Vuex** 中 **state** 的值， **store/mutations.js** 代碼如下： **store/mutations.js** ~~~ const mutations = { SET_STATE_VALUE(state, value){ state.stateValue = value } } export default mutations ~~~ >[success] ### 計算屬性set、get方式 在 **set** 中的 **返回值** 發生變化時 **通過commit提交mutation** 來修改 **state**，如下： **store.vue** ~~~ <template> <div> Vuex中的值：{{ stateValue }} <a-input v-model="stateValue"/> </div> </template> <script> import AInput from '_c/AInput.vue' export default { components: { AInput }, computed: { stateValue: { get(){ return this.$store.state.stateValue }, set(value){ this.$store.commit('SET_STATE_VALUE', value) } } } } </script> ~~~ >[warning] ## 后期補充(該項后期刪除) **插件持久化儲存** 后什么時候 **清空掉llocalStorage** 中儲存的 **持久化儲存值**