vite+vue3安装vuex4

• 安装

npm install vuex@next --save

•  src/store/index.ts

import { createStore, Store, useStore as baseUserStore } from 'vuex'
import { InjectionKey } from 'vue'


// 为 store state 声明类型
export interface State {
    login: any
    home: any
}

// 定义 injection key
export const key: InjectionKey<Store<State>> = Symbol()


// 创建一个新的 store 实例
export const store = createStore<State>({
    modules: {
        home: {
            namespaced: true,
            state: () => ({
                active: sessionStorage.getItem('active' || ''),
                isCollapse: sessionStorage.getItem('isCollapse' || '')
            }),
            mutations: {
                SET_COLLAPSE(state: State, isCollapse: boolean) {
                    isCollapse = isCollapse
                    sessionStorage.setItem('isCollapse', isCollapse + '')
                },
                SET_ACTIVE(state: State, active: string) {
                    active = active
                    sessionStorage.setItem('active', active)
                }
            }

        },
        login: {
            namespaced: true,
            state: () => ({
                token: sessionStorage.getItem('token' || ''),
                name: sessionStorage.getItem('name' || '')
            }),
            mutations: {
                SET_TOKEN(state: State, token: string) {
                    token = token
                    sessionStorage.setItem('token', token)
                },
                SET_NAME(state: State, name: string) {
                    name = name
                    sessionStorage.setItem('name', name)
                }
            }
        }
    }
})


export function useStore() {
    return baseUserStore(key)
}

• 用法

<script lang="ts" setup true>
import {useStore} from '../store';
const store=useStore();

store.commit('SET_NAME', data.username)