vue.js - 在 pinia 中存储 react (ref) 值

Question

我有一个 react 值，我想将其存储在 pinia 存储中。

const data = ref({});
async function loadData() {
  fetch("...")
    .then((res) => res.json())
    .then((json) => (data.value = json));
}
loadData();

const myDataStore = useMyDataStore();
const { myData } = storeToRefs(myDataStore);

// Here I want to store data in the store, reactively
myData.value = data.value;

但是当我这样做时， react 性就消失了。您如何将值存储在商店中，以便每次更新 data 时更新 myData？

Answer 1

您应该这样定义您的商店:

import {defineStore} from 'pinia'

export const useMyDataStore = defineStore('myStore', {
    state: () => ({
        myData: {}
    }),
    actions: {
        update(value){
            Object.assign(this.myData, value);
        }
    }
})

然后用like

const data = ref({});
async function loadData() {
  fetch("...")
    .then((res) => res.json())
    .then((json) => (data.value = json));
}
loadData().then();

const myDataStore = useMyDataStore();

watch(data, (newVal) => {
    myDataStore.update(newVal);
}