<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??碼云GVP開源項目 12k star Uniapp+ElementUI 功能強大 支持多語言、二開方便! 廣告
                [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 **嚴格模式** ![](https://img.kancloud.cn/07/2b/072b236e8d0b6462e9a5a97168dd2934_1096x210.png) 在 **嚴格模式** 下雖然說修改成功了,但是還會 **拋出錯誤警告** ,意思是建議用提交 **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** 中儲存的 **持久化儲存值**
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看