1. 安装 Vuex
使用 npm 或 yarn 安装 Vuex：
npm install vuex
2. 创建并配置 Vuex Store
在项目的 src 目录下创建一个 store 文件夹，然后在该文件夹下创建一个 index.js 文件，用于配置 Vuex Store：
// src/store/index.js
import { createStore } from 'vuex';
const store = createStore({
state: {
// 初始状态
count: 0
},
mutations: {
// 修改状态的方法
increment(state) {
state.count++;
},
decrement(state) {
state.count--;
}
},
actions: {
// 触发 mutations 的方法，可以包含异步操作
incrementAsync(context) {
setTimeout(() => {
context.commit('increment');
}, 1000);
}
},
getters: {
// 计算状态
doubleCount(state) {
return state.count * 2;
}
}
});
export default store;
在上述代码中，我们定义了一个包含 state、mutations、actions 和 getters 的 Vuex Store。state 包含了应用的初始状态，mutations 包含了修改状态的方法，actions 包含了触发 mutations 的方法（可以包含异步操作），getters 包含了计算状态的方法。
3. 在主应用中使用 Vuex
在主应用入口文件（比如 src/main.js）中引入并使用 Vuex：
// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
const app = createApp(App);
app.use(store);
app.mount('#app');
4. 在组件中使用 Vuex
在组件中，可以通过 mapState、mapMutations、mapActions 和 mapGetters 辅助函数来简化对 Vuex 的使用。
<!-- src/components/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 辅助函数将 state 映射到组件的计算属性
...mapState(['count']),
// 使用 mapGetters 辅助函数将 getters 映射到组件的计算属性
...mapGetters(['doubleCount'])
},
methods: {
// 使用 mapMutations 辅助函数将 mutations 映射到组件的方法
...mapMutations(['increment', 'decrement']),
// 使用 mapActions 辅助函数将 actions 映射到组件的方法
...mapActions(['incrementAsync'])
}
};
</script>
以上是一个简单的 Vuex 配置和使用的例子。在实际项目中，你可以根据应用的需求和复杂度，配置更多的状态、mutations、actions 和 getters，并在组件中灵活地使用辅助函数来简化对 Vuex 的操作。 Vuex 的官方文档提供了更详细的信息：[Vuex 文档](https://next.vuex.vuejs.org/)。
转载请注明出处：http://www.zyzy.cn/article/detail/531/Vue 3.0