Vue 3的Pinia状态管理 设置管理的数据初始值

在Vue 3的Pinia状态管理中，可以通过定义store的初始状态来设置管理的数据的初始值。以下是一个示例：

首先，在你的store文件中，定义一个store实例并设置初始状态：

// store.js
import { createPinia } from 'pinia';

const store = createPinia();

store.state = {
  dataValue: 'Initial Value',
};

export default store;

在上面的示例中，我们通过`store.state`属性来设置初始状态，并将`dataValue`属性的初始值设置为'Initial Value'。

接下来，在组件中使用该数据：

// MyComponent.vue
<template>
  <div>
    <p>{{ dataValue }}</p>
    <button @click="setDataValue">Update Value</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { useStore } from 'pinia';

export default defineComponent({
  name: 'MyComponent',
  setup() {
    const store = useStore();

    const dataValue = store.dataValue;

    const setDataValue = () => {
      store.dataValue = 'New Value';
    };

    return {
      dataValue,
      setDataValue,
    };
  },
});
</script>

在上面的示例中，我们通过`store.dataValue`来获取和修改数据的值。初始值将会是在store中设置的值（'Initial Value'）。

通过以上设置，你可以在Vue 3的Pinia状态管理中设置管理的数据的初始值。