vuex是为vue.js应用程序开发的 状态管理模式，它集中的储存所有的组件状态，并以一定的规则去改变状态 。
它解决的问题：
1.多个组件依赖于一个状态时，对于多层组件的传参非常的繁琐，并且对于同级之间的状态的传递未能为力。
2.来自不同的行为需要变更同意状态，以往采用父子组件直接引用或通过事件来变更和同步状态的多层拷贝，会导致无法维护的代码。
Vuex有5个核心属性：State Getter Mutation Action Module
state -- 是单一的状态树，可以在state中定义我们需要的对象，数组，字符串等等。用于管理数据，管理的数据是响应式的，当数据改变时驱动视图更新。.
getter -- 跟vue的计算属性相似，当我们store的state属性中衍生出一些状态，那么我就需要getter，getter会接收state为第一个参数，而且getter的返回值会根据他的依赖被缓存起来，只有在getter中的依赖值（state中的某个需要派生的值）发生改变时才会重新计算。
mutations -- 更改store中state的状态，每个mutation都有一个字符串类型的事件类型和一个回调函数，如果要改变state的状态就要在回调函数中改变。执行这个函数我们要执行一个相应的调用方法。store.commit。更新数据，state中的数据只能使用mutations去改变数据,Mutation 必须是同步函数.
actions -- actions可以提交mutations，在actions中可以执行store.commit,在actions中可以进行异步操作。在页面中使用actions，要用到store.dispatch。响应数据响应成功后交给mutations。
modules -- 其实就是解决了当state中很复杂臃肿的时候，module可以将store分割成模块，每个模块中拥有自己的state,mutations,actions和getter。
vue 项目中的配置
在vue的src中添加store文件夹并且设置名为index.js的js文件，在js文件中如下操作
2.在main.js文件中导入vuex实例 import store from './store' --并且放入到new Vue中store方便全局调用
3.在组件中标签使用$store.state.num可以导入vuex中的状态（数据）
4.也可以在组件computed中导入
num () {
return this.$store.state.num // $store.state调用state中的数据
}
5.导入import { mapState } from 'vue' 在computed通过 ...mapState（[ 'mapState' ]）导出state中的数据
如果组件自己有计算属性，state的字段映射成计算属性
mutations 定义修改数据的函数
参数state当前申明的state选项中的数据，params 接受数据 , payload 载荷（运送数据）建议对象{}形式
mutations: {
mm (state , payload) {
return state.num = state.num + payload.num
}
}
组件调用
methods:{
clicks () {
this.$store.commit('mm',{ num:20 }) // $store.commit调用mutations 中的方法
}
}
效果前
效果后
mapMutations
把vuex中的mutations的函数映射到组件的methods中
通俗：通过mapMutations函数可以生成methods中函数
import { mapMutations } from 'vuex'
methods: {
...mapMutations(['mm']),
clicks () {
this.mm({num: 20})
}
}
actions
// 异步获取数据
actions: {
// actions 中的函数有默认传参 context
// context ：执行上下文 执行环境 ----- 函数能够使用到的对象（vuex实例===this.$store）
getData ({commit}, num) {
// 模拟异步的获取数据
window.setTimeout(()=>{
const data = num
// 通过commit提交数据给mutations修改数据
commit('mm', data)
},2000)
// Promise形式
// return new Promise((r) => {
// setTimeout(() => {
// commit('mm', num);
// r()
// }, 2000)
// })
}
}
组件中调用
clicks1 () {
this.$store.dispatch('getData', {num: 50}) // this.$store.dispatch用于调用actions中的异步方法
}
效果
注意：action 提交的是 mutation，而不是直接变更状态。action 可以包含任意异步操作。
mapActions
mapActions辅助函数，把actions中的函数映射组件methods中
通俗：通过mapActions函数可以生成methods中函数
import { mapActions } from 'vuex'
...mapActions(['getDat'])
clicks1 () {
this.getDat({num: 50})
}
网友评论