Как установить связь между значением, передаваемым через v-model, и свойством в хранилище Pinia?

Question

Юнус

vue

Как установить связь между значением, передаваемым через v-model, и свойством в хранилище Pinia?

Как правильно обновить реактивную переменную `model`, которую я определил в компоненте с помощью `v-model`, с учетом того, что я использую Composition API в Vue 3.5 и Pinia для управления состоянием? В данный момент я рассматриваю возможность использования watcher, но сомневаюсь, что это оптимальное решение. Может быть, есть способ заменить саму реактивную переменную `model = ref()` на значение, передаваемое через `v-model`, вместо простого обновления её значения?

31 января 2025 г. 9:04

Ответы на вопрос 2

Похожие вопросы

Answer 1

В Vue 3 с использованием Composition API и Pinia/Hooks для управления состоянием, вы можете установить связь между `v-model` и состоянием в вашем хранилище без необходимости в watcher. Вместо использования `watch`, вы можете напрямую использовать состояние из Pinia и связывать его с `v-model` вашего компонента.

Вот пример, как это можно сделать:

1. Создайте хранилище в Pinia:

```javascript
// stores/myStore.js
import { defineStore } from 'pinia';

export const useMyStore = defineStore('myStore', {
  state: () => ({
    myValue: '', // реактивное состояние в хранилище
  }),
  actions: {
    setMyValue(value) {
      this.myValue = value; // метод для обновления состояния
    },
  },
});
```

2. В вашем компоненте используйте `v-model`, чтобы связать значение с состоянием в Pinia:

```vue
<template>
  <input type="text" v-model="myValue" />
</template>

<script setup>
import { ref, computed } from 'vue';
import { useMyStore } from '@/stores/myStore';

const store = useMyStore();

// Используем computed для создания связи с реактивным значением в хранилище
const myValue = computed({
  get: () => store.myValue, // получаем значение из хранилища
  set: (value) => store.setMyValue(value), // устанавливаем значение в хранилище
});
</script>
```

В этом примере `myValue` является вычисляемым свойством, которое работает как bidirectional binding. Когда вы вводите текст в поле ввода, это обновляет значение в хранилище через метод `setMyValue`, и когда значение в хранилище изменяется (например, из других компонентов), оно также обновляет значение в поле ввода. 

Таким образом, вы избегаете необходимости использовать `watch` и сохраняете код чистым и понятным.

Answer 2

const store = useStore(/* че там должно быть */)

const model = computed({
  get: () => store.model.value, // мб без .value, не помню, выворачивает пиния ref-ы или нет
  set: (value) => store.model.value = value
})