目录
1.初始化数据、配置actions、配置mutations、操作文件store.js
一、理解Vuex
1.Vuex是什么
概念:专门在Vue中实现集中式状态(数据)管理的一个 Vue 插件,对 Vue 应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。
下面两张图是多组件共享数据分别用全局事件总线实现和用vuex实现的比较:
2.什么时候使用Vuex
1.多个组件依赖于同一种状态
2.来自不同组件的行为需要变更同一状态
3.Vuex工作原理图
二、搭建vuex环境
1.创建文件:src/store/index.js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vue插件
Vue.use(Vuex)
//准备actions——用于响应组件中的动作
const actions = {}
//准备mutations——用于操作数据(state)
const mutations = {}
//准备state——用于存储数据
const state = {}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state,
})
2.在main.js中创建vm时传入store配置项
......
//引入store
import store from './store'
......
//创建vm
new Vue({
el:'#app',
render:h => h(App),
store
})
三、基本使用
1.初始化数据、配置actions、配置mutations、操作文件store.js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)
//准备actions——用于响应组件中的动作
const actions = {
//响应组件中加的动作
jia(context, value) {
context.commit('JIA', value)
}
}
//准备mutations——用于操作数据(state)
const mutations = {
//执行加
JIA(state, value) {
//console.log('mutations中的加被调用了');
state.sum += value
}
}
//准备state——用于存储数据
//初始化数据
const state = {
sum: 0,
}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state,
})
2.组件中读取vuex中的数据
$store.state.sum
3.组件中修改vuex中的数据
$store.dispatch('actions中的方法名',数据) 或 $store.commit('motations中的方法名',数据)
备注:若没有网络请求或其他业务逻辑,组件中也可以越过actions,即不写dispatch,直接编写commit