Vue系列笔记之Vuex

Vuex主要使用场景为大型单页应用，如果项目不是很复杂没有必要使用，Vuex能高效的完成状态管理

安装

安装：npm --save vuex

使用

vuex的使用与vue-router类似：
在main.js里

import Vue from 'vue';
import Vuex from 'vuex';
import App from './App'

Vue.use('Vuex');

const store = new Vuex.store({
  /*----vuex配置-----*/
  state: {
    /*数据保存在store的state字段内，例如定义用户信息adminInfo*/
    adminInfo: 'info...',
    count: 0,
    oneList: [1,3,14,7,19]
  },
  /*
  *  涉及改变数据的使用mutations，存在业务逻辑的使用actions
  */
  mutations: {
    /**mutations用来修改state中的数据，对应组件提交的时间名称，mutations负责业务逻辑处理**/
    increment(state) {
      state.count ++;
    },
    /*
    *  mutations接受第二个参数
    */
    decrease(state) {
      state.count --;
    }
  },
  /*
  *  getters提取组件computed中的公用方法
  */
  getters: {
    filteredList: state => {
      return state.oneList.filter(item => item < 10);
    }，
    /**getter可以依赖其他getter**/
    filteredLength: function(state,getters) {
      return getters.filteredList.length;
    }
  },
  actions: {
    asyncIncrement(context) {
      return new Promise(resolve => {
        setTimeout(() => {
            context.commit('increment');
            resolve();
        },1000)
      })
    }
  }
});

new Vue({
  el: "#app",
  /*----vuex使用-----*/
  store: store,
  render: h => h(App)
})

在组件内调用，index.vue

<template>
  <div>
    {{ adminInfo }}
    {{ filteredList }}
    <button type="button" @click="add">add</button>
    <button type="button" @click="asyncClick"></button>
  </div>
</template>

<script>
export default({
  computed: {
    /**使用state里的数据**/
    adminInfo() {
      return this.$store.state.adminInfo
    },
    /**调用使用getters过滤后的数据**/
    filteredList () {
      return this.$store.getters.filteredList;
    }
  },
  methods: {
    add() {
      /**执行mutations里边的方法使用this.$store.commit的方式,组件只提交事件名**/
      this.$store.commit('increment');
    },
    asyncClick() {
      this.$store.dispatch('asyncIncrement').then(() => {
        console.log(this.$store.state.count);  // 1
      })
    }
  }
})
</script>