<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>

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                [TOC] >[success] # store文件夾說明 接下來會講一下 **正常vuex結構** ,以及 **封裝好的vuex結構**。 >[success] ## 正常vuex **創建項目** 初始化路由會在 **src文件夾** 下生成一個 **store.js** 文件。 **store.js** ~~~ import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { }, mutations: { }, actions: { } }) ~~~ 這種結構 **看似簡單** ,后期項目 **維護麻煩** 。 >[success] ## 封裝vuex **封裝后** 的結構,在 **src目錄** 下創建一個 **store文件夾** ![](https://img.kancloud.cn/cd/c3/cdc31f614c6e19e0bbb0d9f705b05276_351x185.png) >[success] ### module文件夾 首先講一下為什么會有 **module文件夾** ,因為項目如果有 **好多vuex的狀態** ,如果都寫在 **sore.js** 中,看起來會 **雜亂無章** ,都不知道哪個 **vuex** 的 **狀態** 是哪個 **模塊** 中使用的,所以有了 **module文件夾** ,例如我有一個 **user模塊** 我只需要在 **module文件夾** 中創建一個 **user.js** **user.js** ~~~ const state = { // } const mutations = { // } const actions = { // } export default { state, mutations, actions } ~~~ 使用時只需要在 **store文件夾** 下的 **index.js** 中這樣 **引入** 即可: ~~~ import Vue from 'vue' import Vuex from 'vuex' import state from './state' // state.js文件可以不寫.js結尾,這樣寫也會自動找到state.js文件 import mutations from './mutations' import actions from './actions' import user from './module/user' // 引入模塊文件 Vue.use(Vuex) export default new Vuex.Store({ state, // ES6對象簡寫的形式,state: state 等同與 state mutations, actions, modules: { // 模塊引用 user } }) ~~~ >[success] ### plugin文件夾 **plugin文件夾** 是存放 **Vuex插件** 的文件夾,假如我們這里有個持久化插件 **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) }) } ~~~ >[success] ### actions.js ~~~ const actions = { // } export default actions ~~~ >[success] ### index.js **index.js** 屬于 **根級別的Vuex** 可以用來管理 **根級別** 的 **actions** 、 **state** 、 **mutations** 、 **getters** ,同樣可以管理 **模塊(module)** 中的 **actions** 、 **state** 、 **mutations**、 **getter**。 ~~~ import Vue from 'vue' import Vuex from 'vuex' import state from './state' // state.js文件可以不寫.js結尾,這樣寫也會自動找到state.js文件 import getters from './getters' import mutations from './mutations' import actions from './actions' import user from './module/user' // 引入模塊文件 Vue.use(Vuex) export default new Vuex.Store({ state, // ES6對象簡寫的形式,state: state 等同與 state getters, mutations, actions, modules: { // 模塊引用 user } }) ~~~ <br/> >[success] ### mutations.js ~~~ const mutations = { // } export default mutations ~~~ >[success] ### state.js ~~~ const state = { // 狀態寫這里 } export default state ~~~ >[success] ### getters.js ~~~ const getters = { // } export default getters ~~~
                  <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>

                              哎呀哎呀视频在线观看