Vuex 基础概念与环境搭建

1. Vuex 是实现数据集中式状态管理的插件。所有组件共享 Vuex 中的数据，当任意组件修改数据时，其他组件会同步更新。与全局事件总线的区别在于：

   • 全局事件总线：数据传递但未真正共享
   • Vuex：数据存储在中央仓库，实现真正的共享

2. 使用场景：

   • 多个组件依赖同一状态
   • 不同组件需要变更同一状态

3. 环境搭建步骤：

   bash

   # Vue2 安装
   npm i vuex@3 --legacy-peer-deps
   # Vue3 安装
   npm i vuex@4
   

4. 创建项目结构：

   plaintext

   src/
   └── store/
       └── index.js
   

5. 初始化 Store：

   javascript

   // store/index.js
   import Vue from 'vue'
   import Vuex from 'vuex'
   
   Vue.use(Vuex)
   
   export default new Vuex.Store({
     state: { num: 1 },
     mutations: {},
     actions: {},
     modules: {}
   })
   

6. 在 main.js 中关联 Store：

   javascript

   // main.js
   import Vue from 'vue'
   import App from './App.vue'
   import store from './store'
   
   new Vue({
     store,
     render: h => h(App)
   }).$mount('#app')