XOOPS輕鬆架 - 線上書籍

:::

Vue.js 3.0 筆記
=============

1. 先建立 <span class="filename" data-v-3df07819="">store/index.js，如：</span> 
    ```javascript
    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}`;
      }
    };
    
    ```
    
     <span class="filename" data-v-3df07819=""></span>
2. store目錄內的每一個.js檔案都會被轉換為一個 namespaced module （index為根模組）。你的 `state` 應該始終是一個函式，以避免在伺服器端出現不必要的共享狀態。
3. 加入methods，以便觸發vuex actions中的方法，並加入 computed 以取得 getters 的值 
    ```javascript
      methods: {
        handCounter() {
          this.$store.dispatch('handleAddCounter');
          // console.log(this.$store.getters.getCounter);
        },
      },
      computed:{
        getCount(){
          return this.$store.getters.getCounter;
        }
      }
    ```
4. 樣板部份也加入按鈕並顯示之 
    ```markup
    <button @click="handCounter">按我計數+1 {{getCount}}</button>
    ```
5. 也可以從後端直接取得 state 的值 
    ```javascript
    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%2Fmarkdown.php%3Ftbdsn%3D1884

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器