vue3 setup标签使用总结

引入element-plus

	在main.js中引用并且使用中文 顺便引入图标库

const app = createApp(App); // 生成的vue实例 已经存在不需要重复创建
...
import ElementPlus from "element-plus";
import zhCn from "element-plus/dist/locale/zh-cn.mjs"; // 中文
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
// 使用icon
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   
  app.component(key, component);
}
app.use(ElementPlus, {
   
  locale: zhCn,
}); // 使用element-plus

引入vuex

在sotre文件夹中创建index.js 以及其他的 moudle

import {
    createStore } from "vuex";
import app from "./moudle/app.js";

export default createStore({
   
  modules: {
   
    app,
  },
  state() {
   
    return {
   
      test: 111,
    };
  },
});

其中 moudle/app.js

const app = {
   
  state: {
   
    flag: false,
  },
  getters: {
   
    getFlag(state) {
   
      return state.flag
    }
  },
  mutations: {
   
    setFlag: (state, payload) => {
   
      state.flag = payload
    }
  },
  actions: {
   
    // 是否展开左侧导航条
    test({
    commit}, payload) {
   
      return new Promise(resolve => {
   
        commit('setFlag', payload)
        resolve(true)
      })
    }
  }
}

export default app

main.js中引入

const app = createApp(App); // 生成的vue实例 已经存在不需要重复创建
...
import store from './store/index'
app.use(store);

在其他页面使用

<script setup></