How to access pinia state values in setup of another vue componet?

[Pepukayi]

I am trying to access state values of my pinia store in the setup of another vue component without luck. I can access the values in my template but I need to be able access the values in the store at setup of my other component.

My store setup is:

import { defineStore } from 'pinia'

export const useChartDataStore = defineStore({
    id: 'chartData',
    state: () => ({
        SUV: 0,
        Hatchback: 0,
        Sedan: 0
    }),
    getters: {
        doubleCount: (state) => state.SUV * 2
    },
    actions: {
        increment() {
            this.Hatchback++
        }
    }
})

Need to populate the dataValues array with values from my store. My component setup is:

<template>
  <DoughnutChart
    :chart-data="data"
    :options="options"
    css-classes="chart-container"
  />
  <h1>{{chartData.SUV}}</h1>
</template>

<script setup>
import pattern from "patternomaly"
import { ref, computed } from "vue"
import { DoughnutChart } from "vue-chart-3"
import { Chart, DoughnutController, ArcElement } from "chart.js"
import { useChartDataStore } from '../stores/doughnut';

const chartData = useChartDataStore();
console.log(chartData.SUV)

Chart.register(DoughnutController, ArcElement)

const dataValues = ref([chartData.SUV,4,5])

const data = computed(() => ({
  labels: ["Foo", "Bar", "Baz"],

  datasets: [
    {
      data: dataValues.value,
      backgroundColor: pattern.generate(["#859900", "#d33682", "#cb4b16"])
    }
  ]
}))

const options = ref({
  plugins: {
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: "Doughnut"
    }
  }
})
</script>`

[posva]

It’s useChartDataStore
What isn’t working ?

[Pepukayi]

Yes its useChartDataStore. Sorry that was a typo. In the component DoughnutChart I cannot access chartData.SUV in the below code snippet:

const chartData = useChartDataStore();
console.log(chartData.SUV)

[Pepukayi]

The solution: If you want it to track values in the store then it has to be a computed value instead of a ref. const dataValues = computed(() => [chartData.SUV,4,5]) .