Vuex

概念

Vuex是什么：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools

VueX和全局对象的区别：
1.Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2.你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

使用

1.安装：
    npm install vuex --save
2.引用vuex
    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
3.兼容IE
    npm install es6-promise --save
    // 将下列代码添加到你使用 Vuex 之前的一个地方
    import 'es6-promise/auto'
4.VueX使用流程
    1.创建仓库

const store = new Vuex.Store({
      state:{
          count:0
         }  
   })
  注入到vue实例中

5.获取值
	this.$store.state.count

State

提供唯一数据源，所有共享的数据都放入store的state中
获取state中值的第一种方式：this.$store.state.值名称

 <h3>最新的count为：{{$store.state.count}}</h3>//template中this可以省略

获取state中值的第二种方式:使用mapState函数

<template>
  <div>
    读取VueX:{{ count }}
  </div>
</template>

<script>
import { mapState } from "vuex";//需要导入
export default {
//利用mapState函数将当前组件需要的全局数据，映射为当前组件的compute计算属性
  computed:{
     ...mapState(["count"]),//可以有多个值，...为es6扩展运算符
  }
};

mutations

更改Vuex中store唯一的方法就是提交mutations
第一种方式

export default new Vuex.Store({
  state: { count: 1 },
  mutations: {
    increment(state){
      state.count++
    }
  },
});

 this.$store.commit('increment')//commit的作用就是调用某个mutations函数

也可以加上参数

  mutations: {
    increment(state,n){//参数可以是对象
      state.count+=n
    }
  },

 this.$store.commit('increment',5)
 //提交方式也可以是对象，但是这样在接收的时候也要注意以对象.属性名的方式接收

第二种方式：使用mapMutations函数
将需要的mutations函数映射为当前组件的method方法

import {mapMutations} from "vuex"//导入
export default {
  methods: {
   ...mapMutations(["sub"]),
   subCount(){//subCount点击事件
     this.sub()//带参数的话直接把参数写在括号内
   }
  },
}

当需要在对象上添加新属性时，使用这种方式

Vue.set(obj,"age",11)

mutations必须是同步函数（不能有异步操作）

Action

用于处理异步任务
actions中也要通过mutations来修改state中的数据

 actions: {
    addAsync(context) {//context相当于new出来的store对象
      setTimeout(() => {
        context.commit('add')
      }, 1000)
    },
  },

addCount() {
      this.$store.dispatch('addAsync')//dispatch专门用来触发action
    },

也可以加上参数

  mutations: {
    add(state,n) {
      state.count+=n
    },
  },
  actions: {
    addAsync(context,n) {
      setTimeout(() => {
        context.commit('add',n)
      }, 1000)
    },
  },

    addCount() {
      this.$store.dispatch('addAsync',2)
    },

第二种方式：使用mapActions函数
将需要的actions函数映射为当前组件的method方法

import {mapActions} from "vuex"
export default {
  methods: {
    ...mapActions(["addAsync"]),
    addCount() {
      this.addAsync(2)
    },
  },
}

因为mapActions，mapMutations本质上是把全局的某个函数映射到自己的method中，所以其实可以直接使用这样的方式，而不用新增一个点击函数（就像上文的addCount）

<button @click="addAsync(3)">+1</button>//这样的方式更简洁易懂

Getter

过滤器的作用，对state中的数据进行加工处理返回新数据，对原数据没有影响
state中的数据发生变化，Getter中的也会随之变化

  getters:{
    getCount(state){
      if(state.count>10){
        return "不合理"
      }
      return state.count
    }
  }

 读取VueX:{{ this.$store.getters.getCount }}

第二种使用方式：使用mapGetters函数

import {mapGetters} from "vuex"
  computed:{
     ...mapGetters(["getCount"]),
  }

module

将store分为模块，每个模块拥有自己的state，mutations，action，getter

模块的局部状态

//moduleA
export default {
    namespaced: true,//设定命名空间，变为局部
    state:{
        moduleACount:100
    },
    mutations:{
        addACount(state,n){
            state.moduleACount+=n
          }
    }
}

<template>
  <div>
      V3:moduleA:{{this.$store.state.moduleA.moduleACount}}
      <button @click="moduleA">moduleAadd</button>
  </div>
</template>
<script>
export default {
    methods: {
        moduleA(){
            this.$store.commit('moduleA/addACount', 10)
            //这里要加上moduleA/是因为moduleA中加了命名空间
        }
    },
}
</script>