vuex+映射

vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式， 采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。

使用vuex好处：

1、数据的存取一步到位，不需要层层传递

2、数据的流动非常清晰

3、存储在Vuex中的数据都是响应式的

vue官方提供的独立于组件体系之外的，管理公共数据的工具：

vuex五大块：
1.state：统一定义公共数据(类似于data（）return{a:1,b:2,xxxxx})。
2.mutations:使用它来修改数据(类似于methods)。
3.getters：类似于computed(计算属性，对现有状态进行计算得到的新的数据–派生)。
4.actions：发起异步请求。
5.modules：模块拆分。

vuex-state定义公共数据并在组件中使用：

概念：State 本质上就是 Object 对象，

state的作用是：保存公共数据（多组件中共用的数据），

state是响应式的： 如果修改了数据，相应的在视图上的值也会变化。
在每个 Vue 组件中，可以通过this.$store.state.全局数据名称 访问 Store 中的数据

定义公共数据格式：

    new Vuex.store({
      state() {
        return {
           属性名： 属性值 
        }
      }
    })
    在组件中，通过this.$store.state.属性名来访问

Vuex-用mutations修改公共数据

特点：想要修改State 中的数据，只能调用Mutation 方法，它是Vuex中用来修改公共数据的唯一入口。

好处：能够确保修改来源的唯一性，方便调试和后期维护。

在定义时：它的第一个参数是state，第二个参数是载荷

在调用时：用 this.$store.commit(‘mutation名’， 载荷) 来调用

注意：Mutation 必须是同步函数，Mutation 里面不能放异步代码

定义格式：

new Vue.store({
  // 省略其他...
  mutations：{
    // 每一项都是一个函数，可以声明两个形参
    mutation名1：function(state [, 载荷]) {
  
    },
    mutation名2：function(state [, 载荷]) {
  
    }
    }
})
     每一项都是一个函数，可以声明两个形参：
    第一个参数是必须的，表示当前的state。在使用时不需要传入
    第二个参数是可选的，表示载荷，是可选的。在使用时要传入的数据

Vuex-用getters的派生状态：

作用：它是 Vuex 中的计算属性，当 Store 数据源发生变化时，Getter 的返回值会自动更新。

定义格式：

    new Vuex.store({
      // 省略其他...
      getters: {
        // state 就是上边定义的公共数据state
        getter的名字1: function(state) {
          return 要返回的值
        }
      }
    })
    在state中的数据的基础上，进一步对数据进行加工得到新数据。

Vuex-actions-发异步请求

专门用来处理 Vuex 中的异步操作

actions是vuex的一个配置项

  作用：发异步请求获取数据，调用mutations来保存数据，将整个ajax操作封装到Vuex的内部
  要点：action 内部可以发异步请求操作
       action是间接修改state的：是通过调用 mutation来修改state

Vuex-用modules

所有的全局数据、方法都集中在了一起，导致 Vuex 的结构混乱，不利于现阶段的开发和后期的维护 。modules的作用拆分模板，把复杂的场景按模块来拆开。且在使用了modules之后，在访问数据时就要额外添加modules的名字了

export default new Vuex.Store({
  // state: 用来保存所有的公共数据
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
    模块名1： {
            // namespaced为true，则在使用mutations时，就必须要加上模块名
        namespaced: true, 
          state: {},
            getters: {},
            mutations: {},
            actions: {},
            modules: {}
    }，
    模块名2： {
        // namespaced不写，默认为false，则在使用mutations时，不需要加模块名
          state: {},
            getters: {},
            mutations: {},
            actions: {},
         modules: {}
    }  
  }
})
复制代码

映射：

Vuex 中的映射使你可以将 state 中的任何一种属性（state、getter、mutation 和
action）绑定到组件中的计算属性，并直接使用 state 中的数据。

mapState

import { mapState } from 'vuex'

export default {
  // ...
  computed:{
     ...mapState({
         // 箭头函数可使代码更简练
         count: state => state.count,
         // 传字符串参数 'count' 等同于 `state => state.count`
         countAlias: 'count',

         // 为了能够使用 `this` 获取局部状态，必须使用常规函数
         countPlusLocalState (state) {
             return state.count + this.localCount
         }
  	})
  }
}
定义的属性名与state中的名称相同时，可以传入一个数组
//定义state
const state={
    count:1,
}

//在组件中使用辅助函数
computed:{
    ...mapState(['count'])
}

mapGetters

computed:{
    ...mapGetters({
      // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
      doneCount: 'doneTodosCount'
    })
}
当属性名与getters中定义的相同时，可以传入一个数组
computed:{
    ...mapGetters({
      // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
      doneCount: 'doneTodosCount'
    })
}

mapMutations

methods:{
    ...mapMutations({
        add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
}
当属性名与mapMutatios中定义的相同时，可以传入一个数组
methods:{
    ...mapMutations([
        'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

        // `mapMutations` 也支持载荷：
        'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
}

mapActions

mathods:{
    ...mapActions({
        add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
}
当属性名与mapActios中定义的相同时，可以传入一个数组
methods:{
    ...mapActions([
        'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`	
        // `mapActions` 也支持载荷：
        'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
}

``**多个modules**`
在不适用辅助函数的时候：


this.$store.commit('app/addCount')

使用辅助函数，辅助函数的第一个参数给定命名空间的路径
computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })
},
methods: {
  ...mapActions('some/nested/module', [
    'foo', // -> this.foo()
    'bar' // -> this.bar()
  ])
}