Vuex是专门为Vue.js设计的集中式状态管理架构，它允许你将所有的组件共享状态存储在一个单独的地方，即"store"，并以相应的规则保证状态以一种可预测的方式发生变化。以下是Vuex的基本使用方法：
一、安装Vuex
对于Vue 2项目，推荐使用与Vue 2兼容的Vuex 3版本。可以通过npm或yarn进行安装：
bash复制代码
|---|------------------------------|
| | npm install vuex@3 --save |
| | # 或者 |
| | yarn add vuex@3 --save |
对于Vue 3项目，可以直接安装最新版本的Vuex：
bash复制代码
|---|----------------------------|
| | npm install vuex --save |
| | # 或者 |
| | yarn add vuex --save |
二、创建Store
在项目的src目录下创建一个store文件夹，并在其中创建一个index.js文件。这个文件将用于配置和导出Vuex的store。
javascript复制代码
|---|-------------------------------------------|
| | // src/store/index.js |
| | import Vue from 'vue'; |
| | import Vuex from 'vuex'; |
| | |
| | Vue.use(Vuex); |
| | |
| | const state = { |
| | // 在这里定义你的状态 |
| | count: 0, |
| | // 其他状态... |
| | }; |
| | |
| | const mutations = { |
| | // 同步修改状态的方法 |
| | increment(state) { |
| | state.count++; |
| | }, |
| | decrement(state) { |
| | state.count--; |
| | }, |
| | // 其他mutations... |
| | }; |
| | |
| | const actions = { |
| | // 异步操作或复杂逻辑，最终调用mutations来修改状态 |
| | incrementAsync({ commit }) { |
| | setTimeout(() => { |
| | commit('increment'); |
| | }, 1000); |
| | }, |
| | // 其他actions... |
| | }; |
| | |
| | const getters = { |
| | // 基于state计算属性，用于获取一些派生状态 |
| | doubleCount: state => state.count * 2, |
| | // 其他getters... |
| | }; |
| | |
| | export default new Vuex.Store({ |
| | state, |
| | mutations, |
| | actions, |
| | getters, |
| | }); |
三、在Vue实例中引入Store
在main.js文件中引入并挂载store：
javascript复制代码
|---|------------------------------------------|
| | // src/main.js |
| | import Vue from 'vue'; |
| | import App from './App.vue'; |
| | import store from './store/index.js'; |
| | |
| | Vue.config.productionTip = false; |
| | |
| | new Vue({ |
| | render: h => h(App), |
| | store, // 将store挂载到Vue实例上 |
| | }).$mount('#app'); |
四、在组件中使用Vuex
- 访问State：
在组件中，你可以通过this.$store.state.xxx来访问状态，但更好的做法是使用mapState辅助函数将状态映射为计算属性。
javascript复制代码
|---|-------------------------------------|
| | <template> |
| | <div> |
| | <p>Count: {``{ count }}</p> |
| | </div> |
| | </template> |
| | |
| | <script> |
| | import { mapState } from 'vuex'; |
| | |
| | export default { |
| | computed: { |
| | ...mapState({ |
| | count: state => state.count, |
| | }), |
| | }, |
| | }; |
| | </script> |
- 提交Mutation：
你可以通过this.$store.commit('xxx')来提交mutation，同样地，使用mapMutations辅助函数可以将mutation映射为方法。
javascript复制代码
|---|--------------------------------------------------|
| | <template> |
| | <div> |
| | <button @click="increment">Increment</button> |
| | <button @click="decrement">Decrement</button> |
| | </div> |
| | </template> |
| | |
| | <script> |
| | import { mapMutations } from 'vuex'; |
| | |
| | export default { |
| | methods: { |
| | ...mapMutations(['increment', 'decrement']), |
| | }, |
| | }; |
| | </script> |
- 分发Action：
你可以通过this.$store.dispatch('xxx')来分发action，使用mapActions辅助函数可以将action映射为方法。
javascript复制代码
|---|-------------------------------------------------------------|
| | <template> |
| | <div> |
| | <button @click="incrementAsync">Increment Async</button> |
| | </div> |
| | </template> |
| | |
| | <script> |
| | import { mapActions } from 'vuex'; |
| | |
| | export default { |
| | methods: { |
| | ...mapActions(['incrementAsync']), |
| | }, |
| | }; |
| | </script> |
- 使用Getters：
你可以通过this.$store.getters.xxx来访问getters，使用mapGetters辅助函数可以将getters映射为计算属性。
javascript复制代码
|---|---------------------------------------------|
| | <template> |
| | <div> |
| | <p>Double Count: {``{ doubleCount }}</p> |
| | </div> |
| | </template> |
| | |
| | <script> |
| | import { mapGetters } from 'vuex'; |
| | |
| | export default { |
| | computed: { |
| | ...mapGetters(['doubleCount']), |
| | }, |
| | }; |
| | </script> |
五、模块化
当项目变得复杂时，可以将store拆分为多个模块（module）。每个模块拥有自己的state、mutations、actions和getters，最后是模块的namespaced属性，用于将模块的状态和操作封装起来，避免命名冲突。
javascript复制代码
|---|-------------------------------------------|
| | // src/store/modules/counter.js |
| | const state = { |
| | count: 0, |
| | }; |
| | |
| | const mutations = { |
| | increment(state) { |
| | state.count++; |
| | }, |
| | }; |
| | |
| | const actions = { |
| | incrementAsync({ commit }) { |
| | setTimeout(() => { |
| | commit('increment'); |
| | }, 1000); |
| | }, |
| | }; |
| | |
| | const getters = { |
| | doubleCount: state => state.count * 2, |
| | }; |
| | |
| | export default { |
| | namespaced: true, |
| | state, |
| | mutations, |
| | actions, |
| | getters, |
| | }; |
在index.js中引入并使用这些模块：
javascript复制代码
|---|---------------------------------------------|
| | // src/store/index.js |
| | import Vue from 'vue'; |
| | import Vuex from 'vuex'; |
| | import counter from './modules/counter'; |
| | |
| | Vue.use(Vuex); |
| | |
| | export default new Vuex.Store({ |
| | modules: { |
| | counter, |
| | }, |
| | }); |
在组件中使用模块化后的状态和操作时，需要指定模块名：
javascript复制代码
|---|---------------------------------------------------|
| | <template> |
| | <div> |
| | <p>Count: {``{ count }}</p> |
| | <button @click="increment">Increment</button> |
| | </div> |
| | </template> |
| | |
| | <script> |
| | import { mapState, mapMutations } from 'vuex'; |
| | |
| | export default { |
| | computed: { |
| | ...mapState({ |
| | count: state => state.counter.count, |
| | }), |
| | }, |
| | methods: { |
| | ...mapMutations('counter', ['increment']), |
| | }, |
| | }; |
| | </script> |
以上就是Vuex的基本使用方法，包括安装、创建Store、在Vue实例中引入Store、在组件中使用Vuex以及模块化等。通过Vuex，你可以更方便地管理Vue应用中的状态，提高代码的可维护性和可测试性。