vue3使用pinia实现全局变量共享，主动监听变化，并与localStorage的值同步

青莳吖

已于 2024-06-20 12:02:07 修改

阅读量4.3k

点赞数 13

文章标签： javascript 前端 vue.js

于 2023-12-20 11:50:56 首次发布

本文链接：https://blog.csdn.net/weixin_44758923/article/details/135104580

版权

首先创建一个js文件

// themeStyle.js
import {defineStore} from 'pinia';

export const useThemeStyleStore = defineStore('themeStyle', {
    state: () => ({
        backgroundColor1: localStorage.getItem('backgroundColor1') || '#000000',
    }),
    actions: {
        setBackgroundColor1(backgroundColor1) {
            this.backgroundColor1 = backgroundColor1;
            localStorage.setItem('backgroundColor1', backgroundColor1);
        },
    },
});


/**
 *  引入方式
 *  import {useThemeStyleStore} from "@/views/drawing/store/themeStyle";
 *  const myThemeStyleStore = useThemeStyleStore();
 */

然后创建一个公共文件，方便直接引入

//themeStore.js
import {useThemeStyleStore} from “@/store/station/themeStyle”;

export const themeStyleStore = useThemeStyleStore();

然后在要赋值的页面引入

//one.vue
<el-button style="background-color: #000000" @click="handleTheme('#000000')"></el-button>
    <el-button style="background-color: #212830" @click="handleTheme('#212830')"></el-button>

<script setup>
import {themeStyleStore} from "@/store/station/themeStore";

//在方法中赋值
function handleTheme(val) {
  themeStyleStore.setBackgroundColor1(val)
}
</script>

然后在另一个页面主动监听值的变化

//two.vue
import {themeStyleStore} from "@/store/station/themeStore";

watch(() => themeStyleStore.backgroundColor1, (newValue, oldValue) => {
  console.log(newValue)
});