Pinia：如何动态添加新条目以存储状态答案

【问题标题】：Pinia: How to dynamically add new enteries to store statePinia：如何动态添加新条目以存储状态
【发布时间】：2023-02-17 23:11:51
【问题描述】：

我有一个用例pinia在 vue 3 中，我想使用商店操作将新条目动态添加到 pinia 商店。例如，如果我有一个名为名如果我调用商店的操作，它应该添加名为的新状态姓在该州也是如此。这是我试过的

import { defineStore } from "pinia";

export const useAdvanceListingsFilterStore = defineStore(
  "advance-listing-filters",
  {
    state: () => {
      return {
        firstName: "jhon",
      };
    },
    actions: {
      setLastName(payload) {
        return {
          ...this.state,
          lastName: payload,
        };
      },
     
     
    },
  }
);

新状态应该包括名和姓领域。

【问题讨论】：

标签： vuejs3 nuxtjs3 pinia

【解决方案1】：

最简单的方法是将 lastName: null 添加到您的状态，但我想这不是您要实现的目标。

我尝试使用state.$path（参见Mutating the state）在内部向州内添加新项目，但新的lastName项目仍然无法在州外使用state.lastName访问。所以我还没有找到直接实现你的目标的方法。但是还有另一种方法可以做到。

您可以使用嵌套对象来实现您的目标。

看下面的游乐场。

我还应该声明，动态添加状态项会使您的应用程序更难预测。
所以，我宁愿重新考虑数据的设计和流程。

const { ref, createApp, defineComponent } = Vue
const { createPinia, defineStore, storeToRefs } = Pinia

const useAlertsStore = defineStore("advance-listing-filters",
  {
    state: () => {
      return {
        user: { firstName: "John" }
      };
    },
    actions: {
      setLastName(payload) {
        this.$state.user.lastName = payload;
      }
    }
  }
)

const App = {
  setup() {
    const store = useAlertsStore()
    const { user } = storeToRefs(store)  
    const lastName = ref('Doe')
  return {
      store,
      user,
      lastName
    }
  }
}

const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.mount('#app')

<div id="app">
<label>Name: </label> <b>{{store.user.firstName}} {{store.user.lastName}}</b><br /><br />
<label>First Name:</label> <input :value="user.firstName" disabled /><br /><br />
<label>Last Name:</label> <input v-model="lastName" /><br /><br />
<button @click="store.setLastName(lastName)">Set Last Name</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/vue-demi@0.13.11/lib/index.iife.js"></script>
<script src="https://unpkg.com/pinia@2.0.30/dist/pinia.iife.js"></script>

【讨论】：