vite3.x+vue3.x项目搭建五-vuex篇

一、安装

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>

小结：现在typescript比较火热，vue3使用的是ts，那我就用ts构建vue3的项目。下一节