在 vue.js 2 中使用 vuex，需要安裝 vuex，創建一個 vuex 存儲，并在組件中使用 vuex 存儲。映射狀態助手 mapstate 允許組件訪問 vuex 狀態，而映射突變助手 mapmutations 允許組件使用 vuex 突變。
如何在 Vue.js 2 中使用 Vuex
Vuex 是一個用于管理大型 Vue.js 應用程序狀態的集中式狀態管理庫。它允許組件輕松訪問和修改應用程序狀態，從而提高應用程序的可維護性和可測試性。
安裝 Vuex
首先，在你的項目中安裝 Vuex：
npm install vuex
登錄后復制
創建 Vuex 存儲
接下來，創建一個 Vuex 存儲：
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
// 你的狀態對象
},
getters: {
// 你的 getter 方法
},
mutations: {
// 你的 mutation 方法
},
actions: {
// 你的 action 方法
}
})
export default store
登錄后復制
在組件中使用 Vuex
一旦你創建了 Vuex 存儲，你就可以在組件中使用它：
<template><div>
{{ count }}
<button>+</button>
</div>
</template><script>
import { mapState, mapMutations } from 'vuex'
export default {
computed: {
...mapState(['count'])
},
methods: {
...mapMutations(['increment'])
}
}
</script>
登錄后復制
映射狀態助手
mapState 助手可以讓你在組件中使用 Vuex 狀態：
computed: {
...mapState(['count'])
}
登錄后復制
這將創建一個計算屬性 count，該屬性映射到 Vuex 存儲中的 count 狀態。
映射突變助手
mapMutations 助手可以讓你在組件中使用 Vuex 突變：
methods: {
...mapMutations(['increment'])
}
登錄后復制
這將創建一個方法 increment，該方法映射到 Vuex 存儲中的 increment 突變。
