Vuex 基础概念与环境搭建

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

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

使用场景：

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

环境搭建步骤：

bash

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

创建项目结构：

plaintext

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

初始化 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: {}
})

在 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')