vuex汇总

# vuex 汇总

# 代码封装

目录结构
|--store
| --modules
| |--index.js
| --index.js

store->index.js

import Vue from "vue";
import Vuex from "vuex";

import modules from "@/store/modules";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {},
  mutations: {},
  getters: {},
  modules,
  strict: process.env.NODE_ENV !== "production",
});

export default store;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

store->modules->index.js

/**
 * The file enables `@/store/index.js` to import all vuex modules
 * in a one-shot manner. There should not be any reason to edit this file.
 */
const files = require.context(".", false, /\.js$/);
const modules = {};

files.keys().forEach((key) => {
  if (key === "./index.js") return;
  modules[key.replace(/(\.\/|\.js)/g, "")] = files(key).default;
});

export default modules;

1
2
3
4
5
6
7
8
9
10
11
12
13

然后 store->modules 下可以新建 user.js(就不用导入了)

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

1
2
3
4
5
6
7
8
9
10
11

更新时间: 9/8/2021, 4:24:27 PM

← vue3汇总 vue技术文章→