用vue3 Pinia状态管理存储传输一个数据得值

使用Vue 3的Pinia状态管理库可以很方便地存储和传输数据。以下是一个示例：

首先，安装Pinia库：

npm install pinia

然后，在你的Vue 3项目中创建一个store实例，例如：

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

const store = createPinia();

export default store;

接下来，在需要使用状态管理的组件中引入store并创建一个Pinia store实例，例如：

// 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>

在上面的示例中，我们通过`useStore`函数从store实例中获取了`dataValue`属性，并在模板中展示了它。我们还定义了一个`setDataValue`方法，当按钮被点击时，将新值赋给`dataValue`属性。

最后，在你的应用程序的入口文件中，使用`app.use(store)`来注册store：

// main.js
import { createApp } from 'vue';
import store from './store';
import App from './App.vue';

const app = createApp(App);

app.use(store);

app.mount('#app');

现在，当你在`MyComponent.vue`组件中点击按钮时，`dataValue`的值将会更新，并且在其他使用了`dataValue`的组件中也会得到更新。这样就完成了使用Pinia进行状态管理的数据传输。