Vuex状态管理

参考: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')”这种很长的写法

你可能感兴趣的:(Vuex状态管理)