vuex的五个属性
1.state – 存放状态
2.getters – state的计算属性
3.mutations – 更改状态的逻辑,同步操作
4.actions – 提交mutation,异步操作
5.mudules – 将store模块化
使用
const store = new Vuex.Store({
state: {
info: {"name":"我是vuex","id":1,"Name":"张三"}
}
})
1、在组件中可以使用来获取vuex中公共的state的值
this.$store.state.info.Name;//"张三"
也可以使用以下来取值
import { mapState, mapGetters,mapActions, mapMutations } from "vuex";
mounted() {
console.log(mapState);
},
computed: {
...mapGetters(["getStudentLength"])
},
methods:{
...mapMutations(['sub']),
...mapActions(['addA'])
}
2、在组件中修改vuex中的state的值
//第一种方法:在组件中
<button type="button" @click="newName"></button>
methods: {
newName: function() {
this.$store.commit('newName', this.newValue)//通过commit调取vuex中的newName事件来修改
}
}
//第二种方法:在组件中
methods:{
...mapMutation(['add','add2'])//这样就能直接创建store中定义在mutations的方法了。
this.newName(this.newValue)
}
//在vuex中
mutations: {
newName(state,msg) {
state.info.Name = msg;
}
}
3、通过actions来修改vuex中state的值
方法一、
...mapActions(['saveDbSource'])//先引入actions里的方法
this.saveDbSource//使用
方法二、
this.$store.dispatch('saveDbSource', this.DbSource);//通过dispatch调用actions里的saveDbSource
vuex中
actions:{
saveDbSource(context,num){ //context:上下文对象,这里你可以理解称store本身。
context.commit('newName',num)//通过调用mutations里是newName方法来改变vuex中的state。
//这边就是调用mutations的方法,这样才能异步,不要直接调用state中的数据。
}
}
总结:
1、state:负责状态管理,类似于vue中的data,用于初始化数据 //状态管理
2、mutation:专用于修改state中的数据,通过commit触发 //修改state
3、action:可以处理异步,通过dispatch触发,不能直接修改state,首先在组件中通过dispatch触发action,然后在action函数内部commit触发mutation,通过mutation修改state状态值 //异步操作
4、getter:Vuex中的计算属性,相当于vue中的computed,依赖于state状态值,状态值一旦改变,getter会重新计算,也就是说,当一个数据依赖于另一个数据发生变化时,就要使用getter
5、module:模块化管理 //模块
// 导入vue及vuex
import Vue from 'vue'
import Vuex from 'vuex'
// 挂载vuex
Vue.use(Vuex)
// 创建vuex对象并向外暴露
export default new Vuex.Store({
state: {
// 全局属性变量
},
mutations: {
// 全局同步方法, 调用方法,this.$store.commit("xxx")
},
actions: {
// 异步方法 调用方法,this.$store.dispatch("xxx")
},
getters: {
// Vuex属性计算,在视图里面当变量使用
},
modules: {
// 模块化注册
}
})