vuex简单使用

安装

npm i vuex -S

配置

在src下创建一个store文件夹文件夹内创建index.js文件

配置（index.js）文件

1. 引入组件vuex

   import Vue from 'vue'
   import Vuex from 'vuex'
   Vue.use(Vuex)

2. 定义数据

   // 数据存储中心 对应于vue中的data
   const state = {
       count: 0
   }
   
   // 数据操作中心 操作state内的数据的变化
   // 只提供同步操作
   const mutations ={
       addCount() {
           state.count += 1
       },
       deCount() {
           state.count -= 1
       }
   }
   
   // 类似于mutation，他提交的是一个mutation而不是直接改变state内数据的状态
   // 可以包含任意异步操作
   const actions = {
       changeCount(context){
           context.commit('addCount')  // addCount是mutations的一个方法名
       }
   }
   
   // 对state进行计算操作，类似于vue中的计算属性
   // 适用于多个组件复用的计算属性
   const getters = {
       computedCount: (state)=> {
           return state.count*2
       }
   }

3. 实例化Vuex并暴露出去

   const store = new Vuex.Store({
       state,
       mutations,
       getters,
       actions
   })
   export default store

   在main.js中引入使用store

   // 引入store
   import store from './store'
   
   new Vue({
     // 在vue实例化中使用store
     store,
     render: h => h(App),
   }).$mount('#app')

   基本使用

• state 通过 this.$store.state.xxx 来使用
• mutation 通过 this.$store.commit(‘xxx’) 来使用
• getter 通过 this.$store.getters.xxx 来使用
• action 通过 this.$store.dispatch(‘xxx’) 来使用

配合辅助函数的使用

MapState：

import {mapState} from 'vuex'
…
computed: {
    ...mapState([
 			  /**
             *  当映射的计算属性的名称与state的子节点名称相同
             * 我们可以直接给mapState传一个字符串数组
             */
            'name',  //映射 this.name 为 store.state.name
            'age'
        ])

    ...mapState({
            vName:  state=>state.name,  //映射 this.vName 为 store.state.name
            vAge:  state =>state.age
        })

    },

mapGetters：

computed: {
        ...mapGetters({
            name: 'NAME'    //异名映射
        }),
        ...mapGetters([
            'NAME'      //同名映射
        ])
    },

mapMutations：

methods: {
    ...mapMutations([
      "increment", // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
]),
    ...mapMutations({
      add: "increment" // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }

mapAction：

methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }