Vuex的5个状态
-
①state: 所有的状态都存储在这里
-
②mutations: 状态的修改都在这里
-
③gettesr: 从state中派生数据 相当于stare中的计算属性
-
④actions: 在这里执行异步操作
-
⑤modules: 模块化vuex
各部分的使用方法
1. state:数据存储中心,状态中心,使用方法有两种
// 第一种 使用 this.$store.state.属性名称
// 例如:this.$store.state.属性名称
data() {
return {
// this.$store.state
user_img: this.$store.state.user.avatar,
}
}
// 第二种 使用mapState
import { mapState } from 'vuex'
computed: {
...mapState({
userInfo: 'user'
})
// 当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState 传一个字符串数组。
// ...mapState([
// user
// ])
},
2.Mutation:可以修改store数据(必须是同步函数)
const store = createStore({
state: {
count: 1
},
mutations: {
increment (state, value) {
// 变更状态
state.count+=value.num
}
}
})
// 第一种 使用 this.$store.commit('Mutation的方法名称','参数')
this.$store.commit('increment',{
num: 1
})
3.Action:提交的是 mutation,而不是直接变更状态(可以异步操作)
const store = createStore({
state: {
count: 1
},
mutations: {
increment (state, value) {
// 变更状态
state.count+=value.num
}
},
action:{
asynchronization(context){
context.commit('increment')
}
}
})
// 用法
this.$sotre.dispatch('asynchronization')