pinia多页面取值 请给我一个完整示例
时间: 2024-03-24 14:39:55 浏览: 10
好的,下面是一个完整的示例,展示如何在多页面中使用Pinia来管理状态。
首先,安装Pinia和Vue.js:
```bash
npm install pinia vue
```
然后,在你的Vue.js应用程序中,创建一个名为`pinia.js`的文件,用于创建全局的Pinia实例:
```js
import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia
```
在你的Vue.js应用程序中,注册该插件:
```js
import { createApp } from 'vue'
import App from './App.vue'
import pinia from './pinia'
const app = createApp(App)
app.use(pinia)
app.mount('#app')
```
现在,你可以在不同的页面中使用不同的Pinia实例来管理状态了。例如,在页面A中,你可以创建一个名为`aStore`的Pinia实例:
```js
import { createPinia } from 'pinia'
const aStore = createPinia()
export default aStore
```
然后,在页面A的组件中,你可以导入`aStore`实例,并使用它来访问该页面的状态:
```vue
<template>
<div>{{ state }}</div>
</template>
<script>
import { defineComponent } from 'vue'
import aStore from './aStore'
export default defineComponent({
setup() {
const state = aStore.useStore().state
return {
state,
}
},
})
</script>
```
类似地,在页面B中,你可以创建一个名为`bStore`的Pinia实例,并在组件中使用它来访问该页面的状态:
```js
import { createPinia } from 'pinia'
const bStore = createPinia()
export default bStore
```
```vue
<template>
<div>{{ state }}</div>
</template>
<script>
import { defineComponent } from 'vue'
import bStore from './bStore'
export default defineComponent({
setup() {
const state = bStore.useStore().state
return {
state,
}
},
})
</script>
```
这样,你就可以在不同的页面上使用不同的Pinia实例来管理状态了。每个页面都可以使用自己的Pinia实例来管理自己的状态,从而避免不同页面之间状态的混淆。