正常使用：

// src/store/index.jsimport 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: {increment(context) {context.commit('increment');},decrement(context) {context.commit('decrement');},},getters: {getCount: state => state.count,},
});

在组件中使用 Vuex： 在需要访问或修改状态的组件中，你可以使用Vuex提供的辅助函数。

// src/components/Counter.vue<template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button><button @click="decrement">Decrement</button></div>
</template><script>
import { mapState, mapActions } from 'vuex';export default {computed: {...mapState(['count']),},methods: {...mapActions(['increment', 'decrement']),},
};
</script>

vuex中mutations和actions区别：

1、Mutations是同步的，这意味着在mutation中的函数执行时，不能包含任何异步操作，如Promise或者setTimeout等。这样可以保证状态变更的追踪和调试相对简单直观。
Actions可以包含异步操作，它通过分发（dispatch）来触发，并且最终会提交（commit）一个mutation来变更状态。这使得actions成为处理例如API调用等需要等待响应的操作的理想选择。
2、Mutations可以直接修改state，但必须通过提交mutation的方式来进行，通常在组件中通过this.$store.commit{(}^{\prime }mutationNam{e}^{\prime },payload)来调用。Actions无法直接修改state，它们的主要职责是执行异步操作，然后通过提交mutation来更改状态。在组件中，actions通过this.$store.dispatch(‘actionName’,
payload)来触发。
3、使用场景 mutations 适用于简单的状态变更，比如用户输入更新应用的状态。 actions适用于复杂的状态变更，特别是那些涉及到异步操作的情况，如数据获取，提交表单。

模块化使用

模块文件：

// userModule.js
const state = {user: null,userName:"张三"
};const mutations = {SET_USER(state, user) {state.user = user;},
};const actions = {setUser({ commit }, user) {commit("SET_USER", user);},
};export default {namespaced: true,state,mutations,actions,
};

集中模块的状态到 Getters，方便页面中使用
在根级 Vuex Store 中创建 Getters，用于集中所有模块的状态数据：

// getters.js
export default {userName: state => state.user.userName,
};

创建根级的 Vuex Store 文件，将上述的模块引入并注册：

import Vue from 'vue';
import Vuex from 'vuex';
import userModule from './userModule';
import getters from './getters'; // 导入 getters 为对象Vue.use(Vuex);const store = new Vuex.Store({modules: {user: userModule,},getters,
});export default store;

页面使用：

<template><div><h1>User Name: {{ userName }}</h1></div>
</template><script>
export default {computed: {userName() {return this.$store.getters.userName;}},mounted() {this.$store.dispatch("user/setUser", { userName: "John Doe" });this.$store.dispatch("product/addProduct", { name: "Product A" });},
};
</script>