Vue3.x集成 Pinia 之 不同 store 之间的通讯

下面来看看不同store之间是如何相互调用的

1. 创建 useUserStore.js

// useUserStore.js
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
    // state
    state: () => {
        return {
            name: '李逵',
            age: 18,
            address: '名湖小区',
            phone: '11011911211',
            email: '10010@qq.com'
        }
    },
    // getters
    getters: {
        addAge(state) {
            return state.age + 1
        }
    },
    // actions
    actions: {
        editPhone() {
            this.phone = '18700000000'
        }
    }
})

2. 在 useMainStore.js 中引入 useUserStore.js

// useMainStore.js
import { defineStore } from 'pinia'
import { useUserStore } from './useUserStore'

export const useMainStore = defineStore('main', {
    // state
    state: () => {
        return {
            name: 'JunQiu',
            age: 20,
            count: 10
        }
    },

    // getters
    getters: {
        doubleCount(state) {
            return state.count * 2
        }
    },
    // actions
    actions: {
        increment() {
            const { editPhone } = useUserStore()
            const store = useUserStore()
            // 打印 useUserStore 中的 state 和 getters 属性
            console.log('useUserStore', store.name,store.addAge);
            this.count++
            // 修改 useUserStore 中的 state
            store.name = '李鬼'
        },
    }
})

可以看到，这里我们在App.vue页面调用useMainStore的increment方法不但能够获取到 useUserStore 中的state属性、getters属性、actions中的方法，而且还能修改state的值,并且在App.vue页面也能 获取到 useUserStore 的属性和方法