Vue.js 3 및 Pinia Getters 관련 문제

Question

저는 Angular에서 Vue.js로 전환하고 해당 아키텍처를 이해하려고 노력하고 있습니다. 저는 현재 기본적인 문제에 봉착해 있고 많은 해결 방법을 사용해 봤지만 실제로는 일시적인 해결책만 찾고 있습니다.

여기서 가장 중요한 문제는 Vue.js 3과 Pinia 간의 협력입니다. 피니아는 Store, Getter, Action으로 구성되어 있습니다. 때로는 Store에 매우 중첩된 개체가 있고 그 중 특정 부분만 필요한 경우도 있습니다. 예를 들어 필요한 개체의 일부만 출력하려면 getter를 만드는 것이 적합합니다.

하지만 템플릿에서 개체의 해당 부분을 정확히 변경하고 싶다면 어떻게 해야 할까요? 내 소원은 매장의 데이터도 바뀌는 것입니다. 그러나 getter는 읽기 전용이므로 이는 불가능합니다.

여기서 어떻게 진행하나요?

물론 연습을 통해 설명을 강조하기 위해 예를 보여드리고 싶습니다.

으아아아

여기에서는 특정 요소만 필요한 매우 중첩된 개체를 사용하고 있습니다. roles 创建一个商店。在我在 v-for 模板中使用的 getter getElementsForCurrentRole

모두의 이해를 돕기 위해 여기에 템플릿 코드도 게시하겠습니다.

으아아아

문서에 언급된 대로

를 사용하세요. storeToRefs 函数后，我循环遍历 getElementsForCurrentRole getter，以使数据具有反应性。我的问题是数据可能只是部分反应性的。例如，如果我更改 Switch 元素的值，则商店更新成功。这有效。但是，我似乎无法访问正在循环的数组的顺序。一旦我通过拖放更改顺序，我就会收到消息：写入操作失败：计算值是只读

이건 이해가 안 돼요, 이해가 안 돼요.

해결책으로 현재는 이벤트를 기반으로 드래그한 후 배열에 있는 레코드의 이전 인덱스와 새 인덱스를 계산하고 스토리지를 수동으로 업데이트합니다. 그러나 그것이 그 목적이 될 수는 없습니다. 제가 아키텍처에 대해 근본적으로 오해하고 있는 걸까요? 사람들은 그러한 상황을 어떻게 처리할 것인가?

Answer 1

게터를 사용하고 있습니다. Getter는 읽기 전용 속성입니다. pinia 스토어의 값을 업데이트하려면 작업을 생성해야 합니다. 그리고 값이 변경되면 바인딩하고 쓰는 v-model을 사용하고 있습니다. 따라서 getter를 사용하여 읽을 수는 있지만 쓸 수는 없습니다. 귀하의 상황에는 여러 가지 가능성이 있습니다. 그 중 하나는 계산된 속성과 작업을 생성하는 것입니다. 이렇게

으아악

컴포넌트의 계산된 속성:

으아악