vue3 + vite 项目搭建 - 引入vuex

1. 预览文档，了解vuex4.0与vuex3.0的差异
2. 安装依赖

"dependencies": {
    "vuex": "^4.0.2",
    "vuex-persistedstate": "^4.1.0",
  },

3. 在src路径下创建store文件夹，目录结构如图
   

4. 创建根节点state、模块state数据类型

// types/store/index.d.ts
declare namespace TStore {
  interface State {
    systemInfo: string;
  }
}

// types/store/modules/user.d.ts
declare namespace TStore {
    type UserInfo = {
        name: string
    }

    interface User {
        info: UserInfo
    }
}

5. 封装state，生成store实例

// src/store/mutations-types.ts
/**
 * @name: sww
 * @date: 2021-12-08
 * @desc: ROOT
 */
export const UPDATE_SYSTEM_INFO = "UPDATE_SYSTEM_INFO";

/**
 * @name: sww
 * @date: 2021-12-08
 * @desc: MODULE - USER
 */
export const USER_UPDATE_INFO = "USER_UPDATE_INFO";

// src/store/modules/user.ts
import { Module } from "vuex";
import { USER_UPDATE_INFO } from "@/store/mutations-types";

const UserModule: Module<TStore.User, TStore.State> = {
  namespaced: true,
  state: {
    info: {
      name: "sww",
    },
  },
  mutations: {
    [USER_UPDATE_INFO](state: TStore.User, info: TStore.UserInfo) {
      state.info = { ...info };
    },
  },
};

export default UserModule;

// src/store/index.ts
import { InjectionKey } from "vue";
import { createStore, useStore as baseUseStore, Store } from "vuex";
import createPersistedState from "vuex-persistedstate";
import UserModule from "@/store/modules/user";
import { UPDATE_SYSTEM_INFO } from "@/store/mutations-types";

/**
 * @name: sww
 * @date: 2021-12-08
 * @desc: 模块类型
 */
export interface StoreStateTypes extends TStore.State {
  user: TStore.User;
}

export const key: InjectionKey<Store<TStore.State>> = Symbol();

export const store = createStore<TStore.State>({
  state: {
    systemInfo: "systemInfo",
  },
  mutations: {
    [UPDATE_SYSTEM_INFO](state: TStore.State, systemInfo: string) {
      state.systemInfo = systemInfo;
    },
  },
  modules: {
    user: UserModule,
  },
  plugins: [
    createPersistedState({
      key: "uni-app-vuex",
      storage: {
        getItem: (key: string) => uni.getStorageSync(key),
        setItem: (key: string, value: any) => uni.setStorageSync(key, value),
        removeItem: (key: string) => uni.removeStorageSync(key),
      },
    }),
  ],
});

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

6. main.ts中注册 store

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { store, key } from '@/store'

const app = createApp(App)
//vuex
app.use(store, key)
app.mount('#app')

7. 页面中使用

<script lang="ts">
import { defineComponent, ref, computed } from "vue";
import { useStore } from "@/store";
export default defineComponent({
  setup() {
    /**
     * @name: sww
     * @date: 2021-12-08
     * @desc: 公共数据
     */
    const store = useStore();

    /**
     * @name: sww
     * @date: 2021-12-08
     * @desc: DATA数据
     */
    const systemInfo = computed(() => store.state.systemInfo);
    const userInfo = computed(() => store.state.user.info);

    const title = ref("uni app1");
    return {
      title,
      systemInfo,
      userInfo,
    };
  },
});
</script>
</script>

8. 如果不使用组合式api，想通过$store调用，也需进行全局的声明

// types/global.d.ts
import { ComponentCustomProperties } from "vue";
import { Store } from "vuex";
import { StoreStateTypes } from "@/store";

declare module "@vue/runtime-core" {
  // 为 `this.$store` 提供类型声明
  interface ComponentCustomProperties {
    $store: Store<StoreStateTypes>;
  }
}