:::

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}`;
      }
    };
    
  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;
        }
      }

     

  4. 樣板部份也加入按鈕並顯示之
    <button @click="handCounter">按我計數+1 {{getCount}}</button>

     

  5. 也可以從後端直接取得 state 的值
    async asyncData({ app }) {
      return { counter: app.store.state.counter };
    },

     

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

:::

書籍目錄

展開 | 闔起

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

計數器

今天: 2777277727772777
昨天: 3755375537553755
總計: 4458616445861644586164458616445861644586164458616