Vue3的學習---10

一生万物万物归一發表於2024-08-27
Vue

10. Vuex

10.1 Vuex簡介

10.1.1 Vuex概述

Vuex 是 Vue.js 應用程式的狀態管理模式 + 庫。它作為中央儲存庫，用於管理應用程式中所有元件的狀態，並以可預測的方式進行狀態變更。Vuex 的設計理念是基於 Flux 架構，主要由以下幾個核心概念組成：

  1. State（狀態）：
    • 儲存應用程式的所有狀態資料。
    • 單一狀態樹，即一個物件包含了所有應用層級的狀態。
  2. Getter（獲取器）：
    • 從 store 中的 state 中派生出一些狀態，例如對列表進行過濾並計數。
    • 類似於 Vue 元件中的計算屬性。
  3. Mutation（變更）：
    • 唯一可以更改 state 的方法。
    • 必須是同步函式。
  4. Action（動作）：
    • 類似於 mutation，但可以包含任意非同步操作。
    • 提交的是 mutation，而不是直接變更狀態。
  5. Module（模組）：
    • 將 store 分割成模組，每個模組擁有自己的 state、mutation、action、getter，甚至是巢狀子模組。

10.1.2 如何在Vue-cli中引入Vue

  1. 在搭建Vue-cli工程時，選擇新增Vuex模組，就可以在工程中引用Vuex模組了。

  2. 在src資料夾中會出現一個store資料夾，此資料夾中有一個index.js檔案，這就是Vuex模組的js檔案。

    import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

    ​

10.2 Vuex的使用

10.2.1 state的使用

  1. 在store資料夾中的index.js檔案中寫入如下程式碼

    import { createStore } from 'vuex'

export default createStore({
  state: {
    num: 100
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

  2. 在兩個元件中都添入如下程式碼

    <template>
  <div>
    <p>{{ $store.state.num }}</p>
  </div>
</template>

    ​

10.2.2 getter的使用

  1. 在store資料夾中的index.js檔案中寫入如下程式碼

    import { createStore } from 'vuex'

export default createStore({
  state: {
    num: 100
  },
  getters: {
    newNum(state) {
      return state.num + 10
    }
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

  2. 在兩個元件中都添入如下程式碼

    <template>
  <div>
    <p>{{ $store.getters.newNum }}</p>
  </div>
</template>

    ​

10.2.3 mutation的使用

  1. 在store資料夾中的index.js檔案中寫入如下程式碼

    import { createStore } from 'vuex'

export default createStore({
  state: {
    num: 100
  },
  getters: {
    newNum(state) {
      return state.num + 10
    }
  },
  mutations: {
    addMethod(state, param) {
      state.num += param
    }
  },
  actions: {
  },
  modules: {
  }
})

  2. 修改HomeView元件中的程式碼

    <template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <p>{{ $store.state.num }}</p>
    <p>{{ $store.getters.newNum }}</p>
    <button @click="change">change</button>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  methods: {
    change() {
      // commit就是呼叫mutations裡的方法，第一個引數為方法名，第二個引數為傳遞的引數
      this.$store.commit('addMethod', 9)
    }
  }
}

    ​

10.2.4 action的使用

  1. 在store資料夾中的index.js檔案中寫入如下程式碼

    import { createStore } from 'vuex'

export default createStore({
  state: {
    num: 100
  },
  getters: {
    newNum(state) {
      return state.num + 10
    }
  },
  mutations: {
    addMethod(state, param) {
      state.num += param
    }
  },
  actions: {
  },
  modules: {
  }
})

  2. 修改HomeView元件中的程式碼

    <template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <p>{{ $store.state.num }}</p>
    <p>{{ $store.getters.newNum }}</p>
    <button @click="change">change</button>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  methods: {
    change() {
      // dispatch是呼叫actions裡的方法，第一個引數為方法名，第二個引數為傳遞的引數
      this.$store.dispatch('addMethod', 9)
    }
  }
}
</script>

    ​

10.2.5 總結

  1. state：存放全域性共享資料。使用形式：$store.state.num
  2. getters：計算屬性。使用形式：$store.getters.newnum
  3. mutations：處理同步資料的方法。使用形式：$state.commit('addMethod', 9)
  4. actions：處理非同步資料的方法。使用形式：$state.dispatch('addMethod', 9)
    • 先使用$state.commit('addMethod', 9)的方式呼叫Vuex中的actions
    • actions再使用commit方法呼叫Vuex中的mutations

相關文章