vue-cli搭建的项目中使用vuex实现状态管理

vuex详解

1、安装

使用vue-cli搭建好项目以后，安装vuex

npm install vuex --save-dev

2、创建Vuex.Store实例

对于大型应用，需要存储的状态可能很多，我们就将store中的state、getters 、mutations 和 actions分割到单独的文件中。并且把 Vuex 相关代码分割到模块中。

在项目的src文件夹下创建一个名为store的文件夹，store文件夹下的文件目录如下所示：

src/store/index.js  文件是组装模块并导出store的地方

import Vue from 'vue';
import Vuex from 'vuex';

import state from './state.js';
import getters from './getters.js';
import mutations from './mutations.js';
import actions from './actions.js';
import modules from './modules/modules.js';

Vue.use(Vuex);

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

export default store;

3、state.js

const state = {
  count: 0,
  number: 0,
  username: 'liu',
  nickname: 'never',
  password: 123
};

export default state;

4、getters.js

const getters = {
  message: state => {
    return '用户名为：' + state.username;
  },
  msg: state => {
    return `昵称为：${state.nickname}`;
    // 等价于  return '昵称为：' + state.nickname;
    // `${}` 是ES6中的模版字符串语法
  }
};

export default getters;

5、mutations.js

const mutations = {
  increment: state => {
    state.count++;
  },
  asnyAdd: state => {
    state.number++;
  },
  changePassword: (state, payload) => {
    state.password = payload.password;
  },
  changeNickname: (state, payload) => {
    state.nickname = payload.nickname;
  }
};

export default mutations;

6、actions.js

const actions = {
  asnyAdd: context => {
    context.commit('asnyAdd');
  },
  changeNickname ({commit}, payload) {
    commit('changeNickname', payload);
  }
};

export default actions;

7、在Vue组件中使用

8、modules

（1）modules.js

import moduleA from './moduleA.js';
import moduleB from './moduleB.js';

const modules = {
  moduleA,
  moduleB
};

export default modules;

（2）moduleA.js

// 默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的
// 模块的状态默认注册在全局命名空间，为一个对象，对象中的属性是模块中的状态

const moduleA = {
  state: {
    countA: 1,
    nameA: 'moduleA'
  },

  // 模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。
  getters: {
    // 这里的 state 对象是模块的局部状态
    msgA: state => {
      return `模块A的名称为：${state.nameA}`;
    },
    // 对于模块内部的 getter，根节点状态作为第三个参数（rootState）暴露出来
    msgTotal: (state, getters, rootState) => {
      return `根节点用户名为：${rootState.username}，模块A的名称为：${state.nameA}`;
    }
  },

  // 在模块的muatations中不能使用根节点状态，因为muatations中是同步更新状态
  mutations: {
    addA (state) {
      state.countA++;
    }
  },

  // 对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState
  actions: {
    asnyAddA (context) {
      context.commit('addA');
      console.log('局部状态countA为：' + context.state.countA);
      console.log(context.rootState); // 根节点状态是一个对象
      console.log('根节点状态count为：' + context.rootState.count);
    }
  }
};

export default moduleA;

（3）在Vue组件中使用moduleA中的状态

moduleA.vue

（4）moduleB.js

const moduleB = {

  state: {
    countB: 1,
    nameB: 'moduleB'
  },

  getters: {
    msgB: state => {
      return `模块B的名称为：${state.nameB}`;
    }
  },

  mutations: {
    addB (state) {
      state.countB++;
    }
  },

  actions: {
    asnyAddB ({ state, commit, rootState }) {
      commit('addB');
      console.log('局部状态countB为：' + state.countB);
      console.log('根节点状态count为：' + rootState.count);
    }
  }
};

export default moduleB;

（5）在Vue组件中使用moduleB中的状态

moduleB.vue