vue3 如何使用Store

Vue 3 中的Vuex是一个状态管理模式，用于集中管理应用的所有组件共享的状态。以下是基本步骤来使用 Vuex Store：

1. 安装Vuex：首先你需要安装Vuex，可以使用npm或yarn命令行工具：

   npm install vuex
   # 或者
   yarn add vuex

2. 创建store：在项目根目录下创建一个名为 `store` 的文件夹，然后创建 `index.js` 文件，配置基础的 Store 实例：

   import { createStore } from 'vuex';
   
   const store = createStore({
     state: {},
     mutations: {},
     actions: {},
     modules: {} // 如果有多个模块划分，如用户模块、商品模块等
   });

3. 状态管理：在 `state` 对象中定义初始状态，`mutations` 用于处理状态的更新，`actions` 通常用于异步操作。

4. 导入store：在需要使用 Store 的组件中，导入并注入到组件的选项中：

   import { mapState, mapActions } from 'vuex';

   export default {
     computed: {
       ...mapState(['sharedState']) // 获取 store 中的状态
     },
     methods: {
       ...mapActions(['doSomething']) // 调用 action
     }
   };

5. 使用`store.dispatch()`或`this.$store.dispatch()`来触发action，并通过`commit()`或`this.$store.commit()`提交mutation改变状态。