14-8 使用vuex

1. 先建立 store/index.js，如：

   export const state = () => ({
     counter: 0
   });
   
   export const actions =  {
     handleAddCounter({ commit }) {
       commit("addCounter");
     }
   };
   
   export const mutations = {
     addCounter(state) {
       state.counter++;
     }
   };
   
   export const getters =  {
     getCounter: state => {
       return `counter: ${state.counter}`;
     }
   };

   Copy
2. store目錄內的每一個.js檔案都會被轉換為一個 namespaced module （index為根模組）。你的 state  應該始終是一個函式，以避免在伺服器端出現不必要的共享狀態。
3. 加入methods，以便觸發vuex actions中的方法，並加入 computed 以取得 getters 的值

   methods: {
     handCounter() {
       this.$store.dispatch('handleAddCounter');
       // console.log(this.$store.getters.getCounter);
     },
   },
   computed:{
     getCount(){
       return this.$store.getters.getCounter;
     }
   }

   Copy

    

4. 樣板部份也加入按鈕並顯示之

   <button @click="handCounter">按我計數+1 {{getCount}}</button>

   Copy

    

5. 也可以從後端直接取得 state 的值

   async asyncData({ app }) {
     return { counter: app.store.state.counter };
   },

   Copy

    

6. 從後端也可以利用 dispatch 將值塞進 state 中，若要如此，就不要 return，而是在 computed 中用 getters 去取得 state 的值，不然會造成兩份資料可能會不一致的問題。
7. 若要做成  Vuex module，只要在 store/ 下建立一個目錄即可，如 store/User/index.js
8. 若要拆分 Vuex，只要分別存成 store/User/state.js、store/User/actions.js、store/User/mutations.js、store/User/getters.js 即可