将PINIA中的反应性（参考）值存储

Question

我有一个反应价值，我想将其存储在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;

但是当我这样做时，反应性就会丢失。您如何将值存储在商店中，以便每次更新myData都会更新。

Answer 1

使用Watch（）查找REF数据对象的更改。在更改上呼叫mydatastore.update（newdata）：

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

Pinia中的状态应更新

Answer 2

您应该这样定义商店：

import {defineStore} from 'pinia'

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

然后使用

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);
}

Answer 3

Pinia状态已经反应：

Nechoj的构图商店很整洁，这是我的最爱。

import {defineStore} from 'pinia'

export const useMyDataStore = defineStore('myStore', {
    state: () => ({
        myData: {}
    }),
    getters: {
        myReactiveData: ()=>{
            return this.myData
        }
    }
})

然后更新状态：

const data = ref({});
async function loadData() {
    return fetch("...")
        .then((res) => res.json())
}
loadData()
    .then((json) => {
        store.$state = { myData: json}
        // or myStore.$patch({myData:json}))
    }

在模板中：

<!-- always reactive -->
<p>{{myStore.myReactiveData}}</p>

触发MyData突变的回调：

function callbackFnA(mutation, state) {
    console.log(mutation)
    console.log(state)
}
myStore.$subscribe(callbackFnA)
// or with options: myStore.$subscribe(callbackFnA, options?)