vue3 pinia 快速入门教程

简单的理解就是全局变量

配置 stores/counter

import { ref, reactive, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
const user = reactive({
token:null,
name:'无名',
mobile:null
})
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}

return { user,count, doubleCount, increment }
})

使用引入

import { useCounterStore } from '../stores/counter'
const q = useCounterStore()

html

<h1>我的名字：{{ q.user.name }} </h1>
<h1>切换页面还存在: {{ q.count }}</h1>
<h2>返回两倍数：{{ q.doubleCount }}</h2>
<button @click="q.increment()">+1</button>
<button @click="q.user.name = '你好'">改名为你好</button>