一文掌握Pinia使用及数据持久化存储超详细教程

npm install pinia
yarn add pinia

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
// 创建Vue应用实例
// 实例化 Pinia
// 以插件形式挂载Pinia实例
createApp(App).use(createPinia()).mount('#app')

import { defineStore } from 'pinia'
//  `defineStore()` 的返回值命名最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾
export const useStudyStore = defineStore('studyId', {
  state: () => {
    return {
      counter: 0,
    }
  },
  getters:{},
  actions:{}
})

import { defineStore } from 'pinia'
//  `defineStore()` 的返回值命名最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾
export const useStudyStore = defineStore('studyId', ()=>{
  const count = ref(0)
  const name = ref('Ghmin')
  const computedTest= computed(() => count.value * 99)
  function int() {
    count.value++
  }
  return { count, name, computedTest, int}
})

<script setup>
import { useStudyStore } from '@/stores/study'
const store = useStudyStore();
</script>

import { defineStore } from 'pinia'
export const useStudyStore = defineStore('studyId', {
  state: () => {
    return {
      name: 'Ghmin',
      num:0
    }
  },
})

<template>
	<div>
		<h1>vue组件</h1>
		{{ name }}
	</div>
</template>
<script setup>
import { useStudyStore } from '@/stores/study'
const store = useStudyStore();
let { name } = store;
</script>

<template>
	<div>
		<h1>vue组件</h1>
		{{ name }}
	</div>
</template>
<script setup>
//这里需要先引入
import { storeToRefs } from 'pinia'
import { useStudyStore } from '@/stores/study'
const store = useStudyStore();
//这样解构的属性将保持响应性
let { name } = storeToRefs(store);
// name.value 可以直接修改到Store中存储的值
</script>

<template>
	<div>
		<h1>A组件</h1>
		{{ num}}
		{{ arr }}
		<button @click='btn'>按钮</button>
	</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStudyStore } from '@/stores/study'
const store = useStudyS
let { num,arr }  = storeToRefs(store);
const btn = ()=>{
	//批量更新
	store.$patch(state=>{
		state.num++;
		state.arr.push({name:'Ghmin'});
	})
}
</script>

import { defineStore } from 'pinia'
export const useStudyStore = defineStore('studyId', {
  state: () => {
    return {
      num: 0
    }
  },
  getters:{},
  actions:{
  	changeNum( val ){
  		this.num+= val;
  	}
  }
})
<template>
	<div>
		<h1>使用actions</h1>
		{{ num}}
		<button @click='add'>加99</button>
	</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStudyStore } from '@/stores/study'
const store = useStudyStore();
let { num}  = storeToRefs(store);
const add = ()=>{
	store.changeNum(10);
}
</script>

import { defineStore } from 'pinia'
export const useStudyStore = defineStore('studyId', {
  state: () => {
    return {
      num: 0,
    }
  },
  getters:{
  	numGetters(){
  		return this.counter + 999;
  	}
  },
  actions:{}
})
<template>
	<div>
	    <h1>getters的使用</h1>
		{{ num}}
		{{ numGetters}}
	</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStudyStore } from '@/stores/study'
const store = useStudyStore();
let { num,numGetters}  = storeToRefs(store);
</script>