vuex 安裝步驟包括:安裝 vuex 依賴項 npm install vuex –save。創建 vuex 存儲,在 src 目錄建立 store.js 文件并導入、使用 vuex。在 vue 實例中注入 vuex 存儲,在 main.js 文件中導入并使用 store。在組件中使用 vuex,使用 mapstate、mapmutations 和 mapactions 輔助函數映射狀態、突變和動作到組件。
如何安裝 Vuex
步驟:
1. 安裝 Vuex
npm install vuex --save
登錄后復制
2. 創建 Vuex 存儲
在 src 目錄下創建一個名為 store.js 的文件:
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { // 你的狀態對象 }, mutations: { // 你的突變對象 }, actions: { // 你的動作對象 }, getters: { // 你的獲取器對象 } }) export default store
登錄后復制
3. 在 Vue 實例中注入 Vuex 存儲
在 main.js 文件中:
import Vue from 'vue' import App from './App.vue' import store from './store' new Vue({ store, render: h => h(App) }).$mount('#app')
登錄后復制
4. 在組件中使用 Vuex
映射狀態:使用 mapState 輔助函數將 Vuex 狀態映射到組件數據:
import { mapState } from 'vuex' export default { computed: { ...mapState([ 'stateVariable1', 'stateVariable2' ]) } }
登錄后復制
映射突變:使用 mapMutations 輔助函數將 Vuex 突變映射到組件方法:
import { mapMutations } from 'vuex' export default { methods: { ...mapMutations([ 'mutation1', 'mutation2' ]) } }
登錄后復制
映射動作:使用 mapActions 輔助函數將 Vuex 動作映射到組件方法:
import { mapActions } from 'vuex' export default { methods: { ...mapActions([ 'action1', 'action2' ]) } }
登錄后復制