vue3 ts vite vuex全局状态配置实例

1.项目展示

以一个非常非常常用的功能为例，收缩侧边菜单栏

结构介绍

很明显 是 header 里面的组件 控制 menu里面的组件，所以需要用到VUEX配置全局状态

2.全局状态配置

store/index.ts

import { InjectionKey } from "vue";
import { createStore, useStore as baseUseStore, Store } from "vuex";
import { ITabe } from "./type";

export interface State {
  // 1。定义一个 菜单栏收缩的 全局状态 collapse true是关闭 false是打开
  collapse: boolean;
}

export const key: InjectionKey> = Symbol();

export const store = createStore({
  state: {
    // 2。collapse 默认 状态设置
    collapse: false,
  },
  mutations: {
    //  3。设置展开和收缩菜单栏
    setCollapse(state: State, collapse: boolean) {
      state.collapse = collapse;
    },
  },
  getters: {
    // 4.获取 菜单栏收缩
    getCollapse(state: State) {
      return state.collapse;
    },
  },
});

// 定义自己的 `useStore` 组合式函数
export function useStore() {
  return baseUseStore(key);
}

main.ts 引入

import { store, key } from "./store/index";
const app = createApp(App)
app.use(store, key);
app.mount("#app");

3.页面接受

menu/MenuBar

// 菜单栏收缩状态
import { useStore } from "@/store/index"; 
// 上面这里一定不要引入 vuex ，引入自己定义的 useStore 不然报错 ： getters 找不到 
const store = useStore();
const isCollapse = computed(() => {
  return store.getters["getCollapse"];
});

header/Collapse