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