vue3 pinia 中actions修改状态不生效

本文介绍: 在组件中使用时，如果直接操作 store.get add count()则页面上数据变动不生效。如上述代码，在actions中定义 get add count 方法对count做了操作。解决：引入 pinia中的storeToRe fs。使store中的变量变为响应式的即可；

import { defineStore } from "pinia";
import { useother } from "./otherstore";
export const useStore = defineStore("main", {
  state: () =&gt; {
    return {
      count: 3,
      name: "zhangs",
      isadmin: true,
    };
  },
  getters: {
    addcount(state) {
      // return state.count+3
      const oth = useother();

      return this.count + oth.count;
    },
  },
  actions: {
    getaddcount(state) {
        console.log(state)
      this.count++
    },
 getnumcount(num) {
        this.count+=num
    }
  },
});

如上述代码，在actions中定义 get addcount方法对count做了操作

<template&gt;
    <div&gt;
piniatest page --<br/&gt;
count---{{ count }}---{{ addcount }}<br/&gt;
<button @click="handleadd"&gt;添加count</button&gt;
<button @click="handleaddnum(3)"&gt;添加num的count</button&gt;

    </div&gt;
</template>

<script setup>
import {useStore} from '@/store'
import { storeToRefs } from 'pinia';
const store = useStore();
const {count,name,isadmin,addcount} = storeToRefs(store)
// const count = store.count
// const addcount = store.addcount
const handleadd = () => {
    // console.log(99)
    store.getaddcount()
}
const handleaddnum = (num)=> {
    store.getnumcount(num)
}
</script>

<style lang="scss" scoped>

</style>