index:
state是状态的意思,其实就是数据,它是一个可以包含多个属性和属性值的对象
以后用来存储数据
const state = {}
mutations也是一个对象,是一个包含一个或者多个方法的对象
这些方法当中都是在直接操作state数据,就是对state当中的属性进行赋值操作
不能在这些方法当中出现异步循环、判断、操作
const mutations = {}
actions也是一个对象,是一个包含一个或者多个方法的对象
这里面的方法有两个作用
1、和vue组件用户的行为进行对接
2、把用户行为需要对数据的操作提交给mutations
actions函数当中是可以写异步 循环 判断
const actions = {}
getters也是一个对象,是一个包含一个或者多个方法的对象
它和组件当中计算属性的get道理一样,根据已有的数据计算一个没有的数据使用
它是要根据state当中已经存在的数据,计算一个新的数据供组件当中使用
虽然写的都是函数,函数名或者方法名其实是一个数据
const getters = {}
import store from ‘@/store’,
store
在state当中写入数据
const state = {
count:0
}
组件对象接收:
(1){{$store.state.count}}
(2)在计算属性当中写函数调用
computed: {
count(){
return this.$store.state.count
}}
组件中引用可以简写为{{count}}
(3)使用vuex定义的接口(在computed中)
mapState里面传递的参数可以是数组也可以是对象
使用数组的时候需要符合下面两个条件
1、组件当中数据的名称要和vuex当中数据的名称一样
2、使用了模块化必须使用命名空间或者不适用模块化
…mapState([‘count’])
一旦上面的条件不符合,我们就不能传递数组了,传递对象
下面这个对象写法也是有条件,条件就是不能使用模块化
后期项目基本都要使用模块化,所以基本不用
...mapState({
count1:'count'
})
使用了模块化,对象传递,后期这个用的贼多,它什么情况都能用
...mapState({
count1:state => state.count
})
当需要触发事件时
在index.js中写回调
const mutations = {
INCREMENT(state){
state.count++
}}
const actions = {
increment1(context){
// context上下文 是我们store的复制品,是一个新对象,只是里面有很多属性和store属性一样
// 即使不用也要写
context.commit('INCREMENT')
}}
(mutations里面函数的第一个参数一定是state
actions里面函数的第一个参数一定是context
不能修改)
在组件的methods中
increment(){
this.$store.dispatch('increment')
// this.$store.commit('INCREMENT')
//如果单纯的就是修改数据,那么可以省略actions函数,直接提交mutations修改
// 但是这样的情况几乎没有,所以我们还是要掌握完整的流程
},
和actios当中对应的方法进行对接,拧开关
dispatch和当年我们学的emit道理是一样的,分发触发的意思
本质是在调用对应的actions函数
将对应的任务传给actions,需要对数据的操作提交给mutations,在mutations中进行复制操作
<button @click="increment">点击+button>
在getter对象里面,可以根据state当中已经存在的数据,计算出一个新数据使用
const getters = {
double(state){
return state.count * 2
}
}
(state函数定义的形参,是vuex给的)
...mapGetters({
double: 'double'
})
{{double}}