参考:https://baijiahao.baidu.com/s?id=1618794879569468435&wfr=spider&for=pc
简单入门加实例:转自:https://www.jianshu.com/p/ff2adb84c7f2
针对于vue之间各个组件的传值复杂问题
使用vuex来管理状态值,值一旦被修改,所有引用的地方会自动更新
index文件创建Vuex.Store实例保存到变量store中,最后使用export default导出store
import Vue from "vue"
import Vuex from "vuex"
const store=new Vuex.Store({
state:{
text:"text"//需要保存的数据,这里定义要保存的数据
}
})
在main.js中挂载
import store from “./store/index.vue”
new Vue({
el:"#app",
store,
router
})
(1)getters:相当于vue的computed计算属性
用于监听、state中的值的变化,返回计算后的结果
当我们需要从store的state中派生出一些状态,那么我们就需要使用getter,getter会接收state作为第一个参数,而且getter的返回值会根据它的依赖被缓存起来,只有getter中的依赖值(state中的某个需要派生状态的值)发生改变的时候才会被重新计算。
(2) mutations:修改state中的状态值的唯一方法是提交mutations;每个mutation都有一个字符串类型的事件类型和一个回调函数,我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数,那么我们需要执行一个相应的调用方法:store.commit。
mutations:{
add(state,count){
state.count+=count
}
dec(state){
state.count=2
}
}
组件中使用this.$store.commit("add",1) this.$state.commit("dec")
(3)actions:类似vue中的methods
官方不建议直接在组件中修改state,应该在action中提交mutations,在action中可以执行store.commit,在页面中如果我们要叠这个action,则需要执行store.dispatch
actions:{//定义actions函数提交mutation函数
addFun(context){//接受一个与store实例相同方法属性的context对象
context.commit("add")
},
decFun(context){//接受一个与store实例相同方法属性的context对象
context.commit("dec")
}
}
页面文件
methods:{
addFun(){
this.$store.dispatch("addFun")//或者
thisaddFun({dispatch})
}
}
(4)modules:用于划分state模块,每个module拥有独立的state,getters,mutations,actions
(4)mapState、mapGetters、mapActions:用于替代“this.$store.state.count”和“this.$store.dispatch('funName')”这种很长的写法
网友评论