问题
为了跟上潮流，使用 Pinia.js 来做为 vue 的状态管理库，当我在组件的 setup 中使用 useStore 来获取 store 的时候，Pinia.js 的 store 已经被更新了，但是组件渲染没变化。
import { defineStore } from "pinia";
export const useStore = defineStore("main", {
state() {
return {
name: "1024nav",
doubleCount: 0,
};
},
});
在组件中使用
export default defineComponent({
setup() {
const { name, doubleCount } = useStore();
return {
name,
doubleCount,
};
},
});
原因
使用了对象解构方法，导致了响应式失效。
解决
export default defineComponent({
setup() {
const store = useStore();
return {
name: store.name,
doubleCount: store.doubleCount,
};
},
});
或者可以使用 storeToRefs 来代替
import { storeToRefs } from "pinia";
export default defineComponent({
setup() {
const { name, doubleCount } = storeToRefs(useStore());
return {
name,
doubleCount,
};
},
});
