vue设置自定义颜色

最新推荐文章于 2024-06-11 01:30:29 发布

@-小飞

最新推荐文章于 2024-06-11 01:30:29 发布

阅读量2.5k

点赞数 2

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/m0_64531353/article/details/123226218

版权

HTML代码

<template>
    <div class=''>
      <div class="color" :style="{background:$store.state.color}">
      </div>
      <button @click="add" :style="{color:$store.state.color}">点击切换颜色</button>
    </div>
</template>

script代码

 export default {
   
setup(props, ctx) {
const add=()=>{
  store.commit("add")
}
return { ...toRefs(data) ,add};
 },
 };

vuex代码

import { createStore } from 'vuex'
import vuexPersist from 'vuex-persist'
export default createStore({
  state: {
    color:""
  },
  mutations: {
    add(state){
      let color = Math.floor(Math.random() * 16777216).toString(16)
      state.color = '#' + color

    }
  },
  plugins: [
  new vuexPersist({
  storage: window.localStorage
    }).plugin
   ]
})