Vuex 使用笔记
在使用Vuex之前需要使用Vue声明组件
- Vue.use(Vuex)
- let store = new Vuex.store({
- state,// Vuex中保存数据
- mutations, // 对Vuex中的state中的数据进行操作
- actions, //使用 commit() 对mutations操作
- getters //类似于computed计算属性
- })
- new Vue({ store })
需要使用在Vue中绑定 store
Store声明之后回创建一个 $store对象 $store对象中有 Vuex中的state对象 以及 getter对象 可通过$store.state 或者$store.getter 的方法调用
actions对象 需要通过dispatch方法调用 如
methods:{
add(){ dispatch("addcount","可以传输的数据") }
}
vuex中的actions 对象
let actions = {
addcount({commit,state},val){
commit( "addcounts",val )
}
}
Vuex中的mutations 对象
let mutations = {
addcounts(state,val){ //
state.count += val
}
}
Vuex中的state 对象
let state = {
count:0,
}
Vuex中的getters对象 使用方法
let getters = {
decrement(state){
state.count
}
}
调用在对应vue组件中
computed:{
dec(){
return this.$store.getters.decrement; //在getters中定义的函数不需要调用 因为为getter方法 在数据读取时会自动调用
}
}