VUEX的使用

vuex的作用： 常用来作为全局状态管理器， 定义一个状态全局可用，部分功能与缓存类似，但是vuex更灵活，支持更多功能。

vuex的安装和项目引入：

  1. 下载：npm install vuex --save
  2. 引入到项目：在main.js中
    ```bash
      import vuex from 'vuex'

      Vue.use(vuex)

      var store = new vuex.Store({
        state: {show: false}
      })

      new VUE ({
        el: '#app',
        router,
        store, // 使用store
        ...
      })

    ```

  3. 根据不同的功能模块引入：

      a. 在 src 文件夹下， 新建一个 store 文件夹，里面新建一个 index.js 文件
      b. 然后 main.js 中引入 store

      ```bash
        // main.js
        import store from './store'

        new Vue({
          el: '#app',
          router,
          store, // 使用store
          ...
        })
      ```
      c. 到这来已经把 store 分离出来了。
      d. 如果全部用一个 store 来管理，所有的 state 就会不好维护， 而且代码不易读懂， 下面把 state 根据不同的功能 抽离 成不同的模块来管理

      ```bash
        # store/index.js
        import Vue from 'vue'
        import vuex from 'vuex'
        Vue.use(vuex)

        import count from './count/index.js' // 引入计算 count 的 store 对象

        export default new vuex.Store({
          modules: {
            count: count
          }
        })
      ```
      e. 在 count 模块里面的代码

      ```bash
        export default {
          state: {count: 0}
        }
      ```

vuex的核心概念

1. state 储存状态

2. getters 根据 state 做一些封装或者计算， 类似与 vue组件 computed 属性

3. mutation 唯一可以修改 state 的方法，强烈建议用来触发 同步 的修改 state。配合 commit 进行使用

4. actions 异步修改 state 的方法，其实内部还是触发 mutation 的方法来修改 state。 配合 dispatch 使用

5. mapState, mapGetters, mapActions 用来简化写法，使用场景不多

根据上面的 count 模块进行，延伸

  # count/index.js
  export default {

    state: {count: 0},

    getters: { // 类似与 vue组件 computed 属性
      compute_count(state){ // 根据 state 做计算, compute_count 不能直接修改，必须要经过 state 进行计算
        return state.count += 5
      }
    },

    mutations: {
      count_plus(state){
        state.count = state.count++
      },
      count_minus(state, num){ // 每次减动态传入的 num 值， num 为传入的参数
        state.count = state.count - num
      }
    },

    actions: {
      count_minus(context){ // context和我们使用的$store拥有相同的对象和方法
        context.commit('count_minus')
        // 还可以继续在这里触发其他的 mutations 的方法
      }
    }
  }

  # 在调用 store 的组件里面
  <div>{{$store.state.count.count}}</div> // 显示 count 模块里的 count 状态值
  <div>{{$store.getters.compute_count}}</div> // 显示 compute_count 是根据 state 计算出来的值
  <div @click="$store.commit('count_plus')">触发 mutation 提交</div>
  <div @click="$store.dispatch('count_minus')">触发 actions 提交</div>

  <div @click="handleClick">提交</div>
  handleClick(){this.$store.commit('count_plus')}

  # mapState, mapGetters, mapActions简化
  <div>{{count}}</div> // 显示 count 模块里的 count 状态值

  import {mapState} from 'vuex' // 引入进来， mapGetters, mapActions也需同样引入

  computed: { // vue的计算属性
    ...mapState({ // ...拓展运算符
      count: state=>state.count.count
    })
  }

  #mapGetters、mapActions 和 mapState 类似 , mapGetters 一般也写在 computed 中 , mapActions 一般写在 methods 中。