多个store使用

目录

src
    assets
    components
    store
        user_store.js
        site_store.js
    App.vue
    main.js

user_store.js

import {defineStore} from 'pinia'

// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('user', {
    // 推荐使用 完整类型推断的箭头函数
    state: () => {
        return {
            userName: "枫枫",
        };
    }
})

site_store.js

import {defineStore} from 'pinia'

export const siteStore = defineStore('site', {
    state: () => {
        return {
            siteName: "fengfengzhidao",
        };
    }
})

App.vue

<template>
  <div>
    <div>
      userStore: {{ userName }}
    </div>
    <div>
      siteStore: {{ siteName }}
    </div>
  </div>
</template>

<script setup>
import {useStore} from "./store/user_store.js";
import {siteStore} from "./store/site_store.js";
import {storeToRefs} from "pinia"

const user_store = useStore()
const {userName} = storeToRefs(user_store)

const site_store = siteStore()
const {siteName} = storeToRefs(site_store)

</script>

store中使用另一个store

例如在user_store中使用site_store的数据

import {defineStore} from 'pinia'
import {siteStore} from "./site_store.js";

// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('user', {
    // 推荐使用 完整类型推断的箭头函数
    state: () => {
        return {
            userName: "枫枫",
        };
    },
    getters:{
        userSite(state){
            const site_store = siteStore()
            return state.userName + "_" + site_store.siteName
        }
    }
})