以下是一个简单的使用 Vuex 的例子：
1. 安装 Vuex： 在项目中安装 Vuex。
npm install vuex
2. 创建 Vuex Store： 创建一个包含状态的 Vuex Store。
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
},
decrement(state) {
state.count--;
}
},
actions: {
incrementAsync({ commit }) {
setTimeout(() => {
commit('increment');
}, 1000);
}
},
getters: {
doubleCount: state => state.count * 2
}
});
在这个例子中，我们定义了一个包含 count 状态的 Vuex Store，并添加了两个 mutations（increment 和 decrement）用于修改状态。还有一个 action（incrementAsync）用于异步修改状态，以及一个 getter（doubleCount）用于派生状态。
3. 在组件中使用 Vuex： 在组件中使用 Vuex 中的状态和方法。
<!-- Counter.vue -->
<template>
<div>
<p>Count: {{ count }}</p>
<p>Double Count: {{ doubleCount }}</p>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
<button @click="incrementAsync">Increment Async</button>
</div>
</template>
<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
export default {
computed: {
...mapState(['count']),
...mapGetters(['doubleCount'])
},
methods: {
...mapMutations(['increment', 'decrement']),
...mapActions(['incrementAsync'])
}
};
</script>
在组件中，我们使用了 mapState、mapMutations、mapActions 和 mapGetters 辅助函数，以便更方便地使用 Vuex 中的状态、mutations、actions 和 getters。
4. 在 Vue 实例中使用 Vuex： 将 Vuex Store 注入到 Vue 实例中。
// main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';
new Vue({
render: h => h(App),
store
}).$mount('#app');
在这个简单的例子中，我们展示了如何创建一个包含状态、mutations、actions 和 getters 的 Vuex Store，并在组件中使用它。 Vuex 提供了一种集中管理状态的方式，使得状态的变化变得可追踪、可调试。在实际项目中，你可能会使用更多的模块、动态注册模块、甚至插件等高级功能来满足应用的需求。详细的文档可以在 [Vuex 官方文档](https://vuex.vuejs.org/) 中找到。
转载请注明出处：http://www.zyzy.cn/article/detail/4816/Vue