折腾过快4年vuex, 这框架真是不好用, 那一大堆mutations/actions, 在ts环境下很难支持.

那么用什么呢? 用pinia. 现在时间不多, 直接上代码片段, 等有时间再写文.

安装

npm i pinia@next
npm i @vueuse/core

代码

保存为 useTheme.ts

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)

    // console.log('--- main color: ', themeStore.config.mainColor);
 };

简单解说

pinia 的作者是vuex原作者之一, 所以用法和vuex 有点像, 也是分为 state, getter, actions. 但你不用再区分 mutation和actions, 所有方法都放在actions, 是同步还是异步由你自己的asnyc 关键字来定义.

@vueuse/core 是一个非常棒的库, 这里用上它的支持存储功能. 如果你查看chrome的 application 数据, 你会发现名为 themeConfig 的对象已经自动保存到cookie中.

当你改变这个对象值的时候, cookie的值自动改变, 非常棒.