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