vue3之fix: [Vue warn]: Write operation failed: computed value is readonly.

最新推荐文章于 2025-03-28 19:31:57 发布

c_reshape

最新推荐文章于 2025-03-28 19:31:57 发布

阅读量5.2k

点赞数

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_45346457/article/details/121775148

版权

vue 专栏收录该内容

40 篇文章

订阅专栏

<template>
  <div class="transparency tool-kit" @click.stop>
    <section class="contain">
      <span>透明度</span>
      <a-slider v-model:value="slideVal" :tooltipVisible="false" @change="changeSlider" />
      <span>{{ `${slideVal}%` }}</span>
    </section>
  </div>
</template>

<script>
import { useStore } from 'vuex';
import { computed } from '@vue/reactivity';

export default {
  name: 'Transparency',
  setup() {
    const slideVal = computed({
      get() {
        // getter
        return store.state.map.opacityVal;
      },
      set(val) {
        // setter
        changeSlider(val);
      },
    });

    const store = useStore();
    const changeSlider = (value) => {
      store.commit('map/updateState', { opacityVal: value });
    };

    return {
      slideVal,
      changeSlider,
    };
  },
};
</script>