文章目录
1、首先我们先懂这个东西
概念:专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 vue 应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。
补:上面这句话太抽象了,简单地说就是$store里面有方法和共享数据,但是这个方法只能对里面的共享数据操作,你传参也只是配合方法对这个共享数据操作。
而这个共享数据(当然是可以读取啦hhhhh),是这样的,就一个共享数据有用。它可以存好多个共享数据,对象,字符串,数字都能存,具体看下面的解释,懂了就so easy
2、引用尚硅谷的图
这个能看懂就基本懂了,使用入口不是Backend API,而是最左边的VC(这个才是你编写的组件)
actions——用于响应组件中的动作
mutations——用于操作数据(state)
state——用于存储数据
3、先给大家看一下这个创建的代码(index.js),有点抽象不好讲解
//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
//准备actions——用于响应组件中的动作,调用mutations中的方法操作数据
const actions = {
jiaOdd(context,value){
console.log('actions中的jiaOdd被调用了')
if(context.state.sum % 2){
context.commit('JIA',value)
}
},
jiaWait(context,value){
console.log('actions中的jiaWait被调用了')
setTimeout(()=>{
context.commit('JIA',value)
},500)
}
}
//准备mutations——用于操作数据(state),响应actions中的方法
const mutations = {
JIA(state,value){
console.log('mutations中的JIA被调用了')
state.sum += value
},
JIAN(state,value){
console.log('mutations中的JIAN被调用了')
state.sum -= value
}
}
//准备state——用于存储数据
const state = {
sum:0 //当前的和
}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state,
})
4、普通组件时如何调用方法的?
假设组件里面有一个数据 n=1(这个不是公共数据),state.sum才是公共数据,其实原理就是,通过调用actions 的方法触发mutations 的方法修改state。修改state的数据才是目的。
VC(组件)->actions ->mutations ->state
如何取出store的数据,看下面这行代码
{{this.$store.state.sum}}
a)正常调用方式,调用actions 中的方法
this.$store.dispatch('jiaOdd',this.n)
这时候,触发actions 中的jiaOdd方法,jiaOdd再触发mutations中的JIA方法
b)但是其实组件也可以直接调用mutations中的JIA方法(官方不建议)
this.$store.commit('JIA',this.n)
看VC中的属性,命令行打印