vue3 ref响应数据得不到变化

Question

从后端拿数据做柱形图 response是正常的 在vue中设置ref响应数据总是没有变化 代码如下

问题相关代码，请勿粘贴截图

 <div class="schart-box">
        <div class="content-title">柱状图</div>
        <schart class="schart" canvasId="bar" :options="options1"></schart>
      </div>

  name: "basecharts",
  components: {
    Schart,
  },
  setup() {
    // const state = reactive({
    //   arr: [0,0,0,0,0,0]
    const state=ref([0,0,0,0,0,0])
         console.log(state.value)
    ;

    const datalist = () => {
      getcount().then(
          (res) => {
            console.log(res)
            state.value = res.countlist
            console.log(state.value)

          })


    };
      onMounted(()=>datalist())

    const options1 = {
      type: "bar",
      title: {
        text: "最近一周各品类销售图",
      },
      bgColor: "#fbfbfb",
      labels: ["汕头", "深圳", "广州", "珠海", "郑州", "广西"],//横坐标名称
      datasets: [
        {
          label: "系统故障",
          fillColor: "rgba(241, 49, 74, 0.5)",
          data: state.value,
        },
        {
          label: "油液渗漏",
          data: state.value,
        },
      ],
    };

其中data里面的state总是没有变化 得不到响应

希望巨佬能教教我怎么改 卡了好几天了

Answer 1

setup 里面的值暴露出来。

Answer 2

刷新没有变化吗，可以拿到响应数据，无法渲染吗

Answer 3

<template>
  <div>
    <div class="schart-box">
      <div class="content-title">柱状图</div>
      <schart
        class="schart"
        canvasId="bar"
        :options="state1.options1"
      ></schart>
    </div>

  </div>
</template>

<script>
import Schart from "vue-schart";
// import {getcount} from "../api";
import {
  ref,
  reactive,
  onMounted,
  onUpdated,
  onBeforeMount,
  toRefs,
} from "vue";

export default {
  name: "basecharts",
  components: {
    Schart,
  },
  setup() {
    // const state = reactive({
    //   arr: [0,0,0,0,0,0]
    const state = ref([1, 1, 1, 2, 2, 2]);
    // console.log(state.value);

    // const state = reactive({ data: [1, 1, 1, 2, 2, 2] });

    const state1 = reactive({
      options1: {
        type: "bar",
        title: {
          text: "最近一周各品类销售图",
        },
        bgColor: "#fbfbfb",
        labels: ["汕头", "深圳", "广州", "珠海", "郑州", "广西"], //横坐标名称
        datasets: [
          {
            label: "系统故障",
            fillColor: "rgba(241, 49, 74, 0.5)",
            data: state.value,
          },
          {
            label: "油液渗漏",
            data: state.value,
          },
        ],
      },
    });

    const datalist = () => {
      console.log("123", state.value);
      // getcount().then(
      //     (res) => {
      //       console.log(res)
      //       state.value = res.countlist
      //       console.log(state.value)
      //     })

      setTimeout(() => {
        state.value = [1, 2, 3, 4, 5];

        state1.options1 = {
          type: "bar",
          title: {
            text: "最近一周各品类销售图",
          },
          bgColor: "#fbfbfb",
          labels: ["汕头", "深圳", "广州", "珠海", "郑州", "广西"], //横坐标名称
          datasets: [
            {
              label: "系统故障",
              fillColor: "rgba(241, 49, 74, 0.5)",
              data: state.value,
            },
            {
              label: "油液渗漏",
              data: state.value,
            },
          ],
        };
        console.log(state1);
      }, 300);
    };
    onMounted(() => datalist());

    return {
      state1,
    };
  },
};
</script>