1. 概念
在vue中实现集中式状态(数据)管理的一个 vue 插件。对vue应用中多个组件的共享状态(数据)进行集中式的管理(读、写),也是一种组件间的通信方式,适用于任意组件间通信。
2. 何时使用
多个组件需要共享数据时候
3. 搭建 vuex 环境
- 创建文件
src/store/index.js
//引入vue核心库
import Vue from 'vue'
//引入 vuex
import Vuex from 'vuex'
//应用vuex插件
Vue.use(Vuex)
//准备actions 对象--用于响应组件的动作
const actions = {}
//准备 mutations 对象--用于修改 state 中的数据
const mutations = {}
//准备 state 对象--用于保存数据
const state = {}
//创建并暴漏 store
export default new Vuex.Store({
actions,
mutations,
state
})
- 在
main.js
中创建vm时候传入 store配置项
...
//引入 store
import store from './store/index.js'
....
//创建 vm
new Vue({
el:'#app',
render:h=>h(App),
store
})