基本配置

main.js

import { createApp } from 'vue'
import {createPinia} from 'pinia'
let vue = createApp(App),
    pinia = createPinia();
// 使用pinia
vue.use(pinia)
vue.mount('#app')

store 文件下

// 定义一个store
import { defineStore } from 'pinia'
​
// 把这个store 抛出去 操作，第一个参数是id，最终所有的store都是一个独立的存在，第二个参数是配置
export const useCount = defineStore('useCount', {
    // 这一块相当于 组件模板中的data，state必须要是一个函数返回值是一个对象
    state: () => {
        return {
            count: 1
        }
    },
    // 这一块相当于模板中的methods
    actions: {
        changeCount(){
            // 这里的this就是state，谁调用changeCount，这个this就指向谁
            this.count+=2
        }
    },
    // 这一块 相当于模板中的计算属性
    getters: {
​
    }
})

组件中

获取 / 修改 state

// 事先都需要引入store
import { useCount } from "../../store/index.js";
let countStore = useCount();
​
// 方法一 (单个处理)
countStore = countStore.count+1
​
// 方法二 (批量处理)  对象方法
countStore.$patch({
    count: countStore.count + 1,
});
​
// 方法三 (批量处理)  函数方法 接受一个参数，参数为当前state值
countStore.$patch(state=>{
    count : state.count++
})
​

调用actions

// 事先都需要引入store
import { useCount } from "../../store/index.js";
let countStore = useCount();
​
// 直接调用actions方法
countStore.changeCount(2)

调用getters

count10(state){
    // state 和 this 都可以获取到  state中的值
    console.log(state.count , this.count)
    return state.count + 10
}