vuex是一个专门为vue.js应用程序开发的状态管理模式。通俗点说就是我们项目中需要共享的一些数据的管理容器,这里的状态就是数据。
Vuex常用对象
state:存储状态,也就是变量
getters:对数据获取之前的再次编译,可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
mutations:提交状态修改。也就是set、get中的set,唯一修改state的方式 ,不支持异步操作 。
actions:Action 类似于 mutation,不同在于:
Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。
modules:store的子模块,内容就相当于是store的一个实例 。
基本
import Vue from 'vue' // 引入vue
import Vuex from 'vuex' // 引入vuex
// 导出模块
export default new Vuex.Store({
state: {
name:'aiva',
age:22
},
/*
getter 相当于计算属性
getter中的方法默认有两个参数
1.state 当前VueX对象中的状态对象
2.getters 当前getters对象,用于将getters下的其他getter拿来用
*/
getter:{
lastAge(state) {
return this.$store.state.age - 1;
},
last(state,getters) {
return state.name + getters.lastAge;
}
},
/*
mutations 是更改state的唯一方式
mutations中的方法必须是同步函数
mutations中的方法默认有两个参数
1.state 当前VueX对象中的状态对象
2.Payload 该方法在被调用时传递的参数
*/
mutations: {
changeName(state,name) {
state.name = name;
}
},
/*
Action 类似于 mutation,不同在于:
1.Action 提交的是 mutation,而不是直接变更状态。
2.Action 可以包含任意异步操作。
Actions中的方法有两个默认参数
1.context 上下文(相当于箭头函数中的this)对象
2.payload 挂载参数(该方法在被调用时传递的参数)
*/
actions: {
editName(context,payload){
context.commit('changeName',payload)
}
},
// store的子模块,内容就相当于是store的一个实例
modules: {
childrenA:{
state:{},
getters:{},
....
}
}
})
项目中使用
import {mapMutations} from 'vuex'// 导入映射方法
methods:{
...mapMutations(["addToCart"]),
}