VUEX 是 VUE 所提供的一种全局管理方式，可以存放全局或跨多组件所需要的数据。首先，我们先通过简易脚手架 cli 中选择 typescript 快速搭建一个项目。

1.基础使用方式

1. 在 src 文档中创建 store/xxx.js 文档为 vuex 的根目录。
2. 在 main.js 基础页面中引入 VUEX，并将创建的 store 文件导入，如下：

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

2.VUEX 的基本使用方法

1. 根目录下引入 VUE,VUEX，并使用：Vue.use(Vuex)
2. 定义 VUEX 并导出

// 基础使用方式
const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    count: state => state.count;
  },
  actions: {
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
//若是觉得拥堵，将内部分离成单文件，即state.js、getters.js的形式

对 vuex 做分类

在使用的状态管理量多，且需要分门别类进行管理时，最好将不同部分的 state 分别建立 js 文件存储： store/modules/(users.js | category.js | market.js)等。再将其导入主文件 store/index.js 中。

require.context 实现项目工程化

require.context 函数接受三个参数

directory {String} -读取文件的路径

useSubdirectories {Boolean} -是否遍历文件的子目录

regExp {RegExp} -匹配文件的正则

语法: require.context(directory, useSubdirectories = false, regExp = /^.//); 函数执行后返回的是一个函数,并且这个函数有 3 个属性：

1. resolve {Function} -接受一个参数 request,request 为 test 文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径

2. keys {Function} -方法返回匹配成功模块的名字组成的数组

3. id {String} -执行环境的 id,返回了匹配的文件夹的相对于工程的相对路径,是否遍历子目录,匹配正则组成的字符串,主要用在 module.hot.accept

index.js

import Vue from "vue";
import Vuex from "vuex";
import getters from "./getters";
Vue.use(Vuex);

const moduleFile = require.context("./modules", true, /.js$/);

const modules = moduleFile.keys().reduce((modules, modulePath) => {
  // .* 单个字符匹配任意次，即贪婪匹配。
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");
  // 当上下文环境传入某个文件的键时，就会得到一个标准的es module
  // modulePath为匹配到的文件的相对路径，将其作参数传入moduleFile中相当于import该文件
  const value = moduleFile(modulePath);
  modules[moduleName] = value.default;
  return modules;
}, {});
const store = new Vuex.Store({
  modules,
  getters,
});

export default store;

modules/xxx.js

const state = {
  sidebar: [],
};

const mutations = {
  SET_SIDEBAR: (state, sidebar) => {
    state.sidebar = sidebar;
  },
};

const actions = {
  createSidebar: ({ commit }, sidebar) => {
    commit("SET_SIDEBAR", sidebar);
  },
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
};

3. 将 Vuex 改为 TypeScript 的形式

state:

// 定义state类型
export interface State {
  name: string;
  total: number;
  isLogin: boolean;
  categories: object[];
}

export const state: State = {
  name: "",
  total: 0,
  isLogin: false,
  categories: [],
};

action:

// 增加形参的类型
export default {
  createSidebar(context: any, sidebar: any) {
    commit("SET_SIDEBAR", sidebar);
  },
};

mutaction:

import { State } from "./state";
export default {
  add(state: State, sidebar: any) {
    sidebar ? (state.total += sidebar) : state.total++;
  },
};

4.在 vue 页面中使用 vuex

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { mapMutations } from 'vuex';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {
public add() {
    this.$store.commit('add');
  }

  public addAsync(num: any) {
    this.$store.dispatch('createSidebar', {});
  }
}