:::

10-1 拆分 Vuex

  1. 若架構變大時,可以將 Vuex 項目都獨立出來
    import { createStore } from "vuex";
    import state from "./state.js";
    import actions from "./actions.js";
    import mutations from "./mutations.js";
    import getters from "./getters.js";
    import Auth from "./Auth";
    export default createStore({
      state,
      actions,
      mutations,
      getters,
      modules: {
        Auth,
      },
    });
    

     

  2. \src\store\state.js
    export default {
      isOpen: false,
    };
    

     

  3. \src\store\actions.js
    export default {
      handOpenState(context) {
        const isOpen = !context.state.isOpen;
        context.commit("OpenState", isOpen);
      },
    };
    

     

  4. \src\store\mutations.js
    export default {
      OpenState(state, payload) {
        state.isOpen = payload;
      },
    };
    

     

  5. \src\store\getters.js
    export default {
      isOpen(state) {
        return state.isOpen;
      },
    };
    

     

  6.  

:::

書籍目錄

展開 | 闔起

快速登入


http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D33%26tbdsn%3D1754

計數器

今天: 315315315
昨天: 3254325432543254
總計: 8071087807108780710878071087807108780710878071087