vuex 的原理与使用

vuex 是什么

1. 管理所有组件的数据和状态，实现组件通信
2. 借鉴了 flux 和 redux 的基本思想，将状态抽离到全局，形成一个 store 类

flux 和 vuex

• flux

1. flux 是一种状态管理的架构思想
2. flux 分为 4 个部分：1、View 视图层；2、Action 视图的消息；3、Dispatcher 接收 Actions 和执行回调；4、Store 存储状态
3. flux 的的执行顺序：View 发出 Action 传递到 Dispatcher，Dispatcher 通知 Store，Store 发生变动，提醒 View 更新页面，可见 flux 的特点就是“单向流动”

• vuex

1. vuex 是基于 flux 架构，通过 Sotre 类来实现数据管理的核心功能，并且做了一些改进：改进了 Action，提出了 mutation 的概念；提供了 getter 机制，来获取 state 状态；无缝接入 vue，将 state 对象挂载 vue 中 data 属性中，并且提供了一些语法糖，更方便修改组件数据与状态
2. 在 vuex 中使用 vuex，只需要 Vue.use(Vuex)，并且传入一个 store 对象实例，实现 store 注入
3. store 内部支持模块配置与模块嵌套
4. vuex 提供了两种信号机制：commit 和 dispatch，两者区别是 dispatch 触发 action 回调，commit 触发 mutation 回调，dispatch 返回 Promise，commit 无返回
5. vuex 在非严格模式下，可以直接更改 state(this.$store.state.[name] = [value])，官方推荐开启严格模式，并且只通过 mutation 更改 state，我个人理解，不要直接更改 state，避免代码不可维护，要使用官方推荐的方式更改
6. vuex 的执行顺序：view 调用 commit，请求 Sotre 类的 mutation 函数，Store 中的 state 状态发生改变，响应式更新到 view 上

vuex 的核心思想

1. 核心是一个 store，store 是一个容器，存储着组件的状态
2. 使用 vuex 与使用全局变量的区别：1、vuex 的状态的存储是响应式的；2、改变 vuex 中 store 的方式唯一，只能通过 mutation 改变；3、action 中可以做一些异步的操作，比如 shuffle 一个传入的数组后再 commit

使用 vuex 的应用场景

1. 为实现跨组件数据状态共享，使用 vuex，集中存储或管理组件状态
2. 个人理解，vuex 适用于中大型项目：音乐播放器；可视化在线编辑，如在线 ppt 用 vuex 实现撤销和重做；用户行为监控等。偏展现的，使用 vuex 意义不大

vuex 的使用

• 目录

• components.vue

// vuex 提供的三个钩子，用于获取state和提交mutation
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  // ...
  computed: {
    ...mapGetters(["state1", "state2"])
  },
  methods: {
    play() {
      var list = {
        name: "vue"
      };
      this.setStat1(list);
    },
    pause(index, list) {
      this.setStat2({
        index,
        list
      });
    },
    ...mapMutations({
      setStat1: "SET_STATE1"
    }),
    ...mapActions(["setStat2"])
  }
  // ...
};

• state.js

const state = {
  state1: "",
  state2: ""
};
export default state;

• getters.js

// 文章列表
export const state1 = (state) => state.state1;
// 项目列表
export const state2 = (state) => state.state2;

• mutations-type.js

export const SET_STATE1 = "SET_STATE1";
export const SET_STATE2 = "SET_STATE2";

• mutations.js

import * as types from "./mutation-type";
const mutations = {
  [types.SET_STATE1](state, list) {
    state.list = list;
  }
};
export default mutations;

• actions.js

import * as types from "./mutation-type";
export let setStat2 = function({ commit, state }, { index, data }) {
  let obj = state.list.slice();
  let result = [data, obj.splice(index, 1)];
  commit(types.SET_STATE2, result);
};

• index.js

import Vue from "vue";
import Vuex from "vuex";
import * as actions from "./actions";
import * as getters from "./getters";
import state from "./state";
import mutations from "./mutations";
// debug
import createLogger from "vuex/dist/logger";
Vue.use(Vuex);
// 提示环境
const debug = process.env.NODE_ENV == "production";
export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations,
  strict: true,
  plugins: !debug ? [createLogger()] : []
});

• main.js

import store from "./store/index";
new Vue({
  store,
  render: (h) => h(App)
}).$mount("#app");

使用 vuex 中的 module

// 最经典的计数器的例子
// store.js
import news from "./news.js";
import createLogger from "vuex/dist/logger";
const debug = process.env.NODE_ENV == "production";
const store = new Vuex.Store({
  // 这个store就是一个root store
  state: {
    count: 0
  },
  getters: {
    getCount(state) {
      return state.count;
    }
  },
  actions: {
    add(store) {
      store.commit("increment");
    }
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  // 这个module有自己的namespace和localContext
  modules: {
    news
  },
  strict: true,
  plugins: !debug ? [createLogger()] : []
});

// news.js
// module
const list = {
  namespaced: true,
  state: {
    count2: 1
  },
  getters: {
    getCount2(state) {
      return state.count2;
    }
  },
  actions: {
    add2(store) {
      store.commit("increment2");
    }
  },
  mutations: {
    increment2(state) {
      state.count2++;
    }
  }
};