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