一、安装
npm install vuex@next --save
or
yarn add vuex@next --save
二、main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"
import store from "./store"
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(router).use(store).use(ElementPlus).mount('#app')
三、新建store文件,如图
1.index.js
对vuex 模块化封装
import { createStore } from 'vuex'
// 直接引入所有的模块
const modulesFiles = import.meta.globEager('./modules/**/*.js') || import.meta.globEager('./modules/**/*.ts')
const modules = {}
for (const key in modulesFiles) {
modules[key.replace(/(\.\/modules\/|\.js)/g, '')] = modulesFiles[key].default
}
Object.keys(modules).forEach(item => {
modules[item]['namespaced'] = true
})
const store = createStore({
modules,
})
export default store
2.home.js
import { recordFind } from "@/api/home";
const state = {
username: "",
};
const getters = {
};
const mutations = {
SET_NANE: (state, username) => {
state.username = username;
},
};
const actions = {
recordNew({ commit }, userInfo) {
const { subOrgUuid, limit} = userInfo;
return new Promise((resolve, reject) => {
recordFind({
limit: limit,
subOrgUuid: subOrgUuid,
})
.then((res) => {
if (res.data.code == "0") {
commit("SET_NANE", res.data.body.username);
}
resolve();
})
.catch((error) => {
reject(error);
});
});
},
};
export default {
namespaced: true,
state,
getters,
mutations,
actions,
};
3.vue页面(例子:home.vue)
前面篇幅对接口修改
<template>
<div>
{{ msg }}
<div class="content-box">
<router-view v-slot="{ Component }">
<transition name="router-fade" mode="out-in">
<keep-alive>
<component :is="Component" />
</keep-alive>
</transition>
</router-view>
</div>
</div>
</template>
<script>
import { ref } from "vue";
import { recordFind } from "@/api/home";
export default {
data() {
return {
msg: "",
newsList: [],
ruleForm: {
limit: 5,
subOrgUuid: "***",
},
};
},
setup(props) {
let msg = ref("主页");
return {
msg,
};
},
components: {},
computed: {},
created() {
this.recordFind();
},
methods: {
recordFind() {
this.$store
.dispatch("home/recordNew", this.ruleForm)
.then((res) => {
this.$message({
message: "成功",
type: "success",
center: true,
});
})
.catch((error) => {
this.$message.error(error);
});
},
},
};
</script>
<style lang="scss" scoped>
.content-box {
width: 100%;
height: 500px;
padding-bottom: 40px;
-webkit-transition: left 0.3s ease-in-out;
transition: left 0.3s ease-in-out;
background: #f0f0f0;
}
</style>