Vuex是什么?
做数据共享和传递(不同页面之间的数据传递)
单一状态树管理,让数据的修改脉络更佳清晰,便于定位问题,模块化
Vuex有什么
State:要共享的数据(全局变量)
Getter:相当于vue中computed,及计算属性,可以用于监听,计算state中的值的变化
Mutation:Vuex中去操作数据的方法(只能同步执行)
Action:用来操作Mutation的动作,他不能自己去操作数据源,但可以把mutation变为异步的
Modules:即分类管理状态值
在src目录下新建一个store文件夹
然后在main.js文件中注册vuex的实例
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
// 按需导入
import {addLocalGoods,getTotalCount,updateLocalGoods,delectLocalGoods} from '../common/localStorage.js'
export default new Vuex.Store({
// 在state中去声明全局变量,可以通过 this.$store.state 访问
state: {
buyCount:0
},
// 在getters中声明state中变量的计算函数,缓存计算后的数据, 通过 this.$store.getters 调用
getters: {
// 接受state作为参数,每次 count发生变化时 , 都会被调用
getBuycount:state=>{
// return state.buyCount
return state.buyCount > 0 ? state.buyCount : getTotalCount()
}
},
// 只能执行同步方法,通过 this.$store.commit 方法调用
mutations: {
// 改变state状态的方法,不建议直接通过
// this.$store.state.? = ?的方式改变state中的状态
//载荷goods === {goodsId:100,count:3}
addGoods(state,goods){
// state.buyCount += goods.count
state.buyCount = addLocalGoods(goods)
},
updateGoods(state,goods){
state.buyCount = updateLocalGoods(goods)
},
delectgoodsId(state,goodsId){
state.buyCount = delectLocalGoods(goodsId)
}
},
// 借助actions的手去 执行 mutations , 通过 this.$store.dispatch 的方式调用
// 可以用来执行异步操作,可以跟踪异步数据状态变化
actions: {
addGoods: content => {
// 调用 mutation
content.commit('addGoods');
},
updateGoods: (content, n) => {
content.commit(' updateGoods', n);
}
}
})
这些就是vuex中最基础的概念,了解了这些,就可以入门vuex了,有哪里不明白的或不对的,留言下,咱们可以一起讨论、共同学习!