安装
npm install vuex@next --save
main.js引用
//vue2
import store from '@/store';
const app = new Vue({
store,
...App
})
//vue3
import store from "./store";
app.use(store);
store/index.js 入口文件
//vue2
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
const mod = require.context('./modules', true, /\.js$/)
const modules = mod.keys().reduce((modules, modulePath) => {
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')// set './app.js' => 'app'
const value = mod(modulePath)
modules[moduleName] = value.default
return modules
}, {})
export default new Vuex.Store({
modules,
getters,
})
//vue3
import { createStore } from "vuex";
import getters from "./getters";
const modulesFiles = import.meta.globEager("./modules/**/*.js");
const modules = {};
for (const key in modulesFiles) {
modules[key.replace(/(\.\/modules\/|\.js)/g, "")] = modulesFiles[key].default;
}
export default createStore({
getters,
modules,
});
store/getters.js 配置读取项
const getters = {
//第一个xxx为子模块的文件名,第二个xxx为该子模块下state的参数
getQQ: (state) => state.xxx.xxx,
}
export default getters
store/modules/xxx.js 子模块
export default {
namespaced: true,
state: {
qq: "",
},
mutations: {
setQQ(state, val) {
state.qq = val;
},
},
actions: {
setQQ({ commit }, val) {
commit("setQQ", val);
},
},
};
使用
//读取数据,xxx为getters.js配置的数据项
//vue2
this.$store.getters.xxx
//vue3
import { useStore } from "vuex";
const store = useStore();
store.getters.getQQ
//使用actions方法
//vue2
this.$store.dispatch("user/setQQ", qq);
//vue3
import { useStore } from "vuex";
const store = useStore();
store.dispatch("user/setQQ", qq);