pinia 的用法（替代vuex）

安装

npm i pinia@next
npm i @vueuse/core

引入pinia

import { defineStore } from 'pinia';
import { useStorage } from '@vueuse/core'

interface ThemeConfig {
    mainColor: String, 
}

const _themeConfigImpl: ThemeConfig = { 
    mainColor: 'red'
 };
  
const useTheme = defineStore({
    // id: 必须的，在所有 Store 中唯一
    id: "useTheme",
    // state: 返回对象的函数
    state: ()=> ({
 
        // 所保存的对象
        config: useStorage('themeConfig', _themeConfigImpl),      
        
    }),

    getters: {

    }, 

    actions: {
        changeTheme(config: ThemeConfig){
                this.config.mainColor = config.mainColor;
        }
    }
})
export {
    useTheme,   ThemeConfig
}

调用

import {ThemeConfig, useTheme} from '@/api/comm/useTheme';
const themeStore = useTheme();
const myConfig: ThemeConfig = { 
    mainColor: 'blue'
};

 let _toggleColor = ()=> {
    myConfig.mainColor = themeStore.config.mainColor == 'blue' ? 'red': 'blue';
    themeStore.changeTheme(myConfig)
 };