Vuex

vuex

VueX是适用于在Vue项目开发时使用的状态管理工具

vuex中state、Getters、Mutations、Actions、Modules用法

1.state
是全局变量组成的全局对象，通过this.$store.state可以获取这个对象。state可以直接修改值

2.Getters
就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算this.$store.getters.state1

3.Mutations
更改 Vuex 的 store 中的状态的 唯一方法 是提交 mutation！ mutation是通过直接改变状态（全局变量state）的方式改变state mutation 必须同步执行

this.$store.commit(‘change1’,‘修改数据11111111111’)`

4.Actions
Action 类似于 mutation，不同在于：

- Action 提交的是 mutation，而不是直接变更状态。

- Action 可以包含任意异步操作

  Action 通过 store.dispatch 方法触发

5.Modules模块化状态管理
modules模块中的state不能通过this.$store.state获取，必须加上module的命名空间，比如：this.$store.moduleA.data1 但是getters和mutations能正常使用

辅助函数：

　　通过辅助函数mapState、mapActions、mapMutations，把vuex.store中的属性映射到vue实例身上，
　　这样在vue实例中就能访问vuex.store中的属性了，对于操作vuex.store就很方便了。
　　state辅助函数为mapState，actions辅助函数为mapActions，mutations辅助函数为mapMutations。
　　（Vuex实例身上有mapState、mapActions、mapMutations属性，属性值都是函数）

辅助函数使用：

	在当前组件中引入Vuex
	通过Vuex来调用辅助函数

import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'

mapState:把state属性映射到computed身上

computed: {
        ...mapState([
            'user',
            'moduleA'
        ]),
    },

在computed属性中来接收state中的数据 接收方式有2种（数组和对象，推荐对象）
如果自身组件也需要使用computed的话，通过解构赋值去解构出来
mapAcions：把actions里面的方法映射到methods中

methods:{
        ...Vuex.mapActions({
            add:"handleTodoAdd",    //val为actions里面的方法名称
            change:"handleInput"     
        })
    }

mapGetters:把getters属性映射到computed身上

computed:{
        ...Vuex.mapGetters({
            NumN:"NumN"
        })
       
    }

触发getters里面的方法。getters里面的每一个方法中都会有一个参数 state

mapMutations：把mutations里面的方法映射到methods中
　只是做简单的数据修改（例如n++），它没有涉及到数据的处理，没有用到业务逻辑或者异步函数，可以直接调用mutations里的方法修改数据。

methods:{
      
        ...Vuex.mapMutations({
            handleAdd:"handlMutationseAdd"
        })
    }

modules属性
背景：在Vue中State使用是单一状态树结构，应该的所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，store对象也将对变得非常大，难于管理。
module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。