pinia和pinia的持久化管理

一、安装使用Pinia

中文文档

npm install pinia -D

main.js引用

import { createPinia } from 'pinia'

app.use(createPinia())

根目录新建store/index.js中写入

export const useStore = defineStore('storeId', {
  state: () => {
    return {}
  },
  getters:{},
  actions:{}
})

组件使用

<script setup>
	import { useStore } from '../store'
	const store = useStore();
</script>

二、State

Pinia定义state数据

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
  state: () => {
    return {
      name: 'xxxxxx'
    }
  },
  getters:{},
  actions:{}
})

组件使用 / 修改 pinia 的 state 数据

本身pinia可以直接修改state数据，无需像vuex一样通过mutations才可以修改，let { name } = store 这种解构是不可以的，所以要换解构的方式。

<template>
	<div>
		{{ name }}
		<button @click='btn'>按钮</button>
	</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { name }  = storeToRefs(store);
const btn = ()=>{
	name.value = '123';
}
</script>

使用$patch进行批量更新

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
  state: () => {
    return {
      num: 0,
      name: 'xxxxx',
      arr:['a','b','c']
    }
  },
  getters:{},
  actions:{}
})

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

三、actions

export const useStore = defineStore('storeId', {
  state: () => {
    return {
      num: 0
    }
  },
  getters:{},
  actions:{
  	changeNum(val){
  		this.num+= val;
  	}
  }
})

<template>
	<div>
		{{ num }}
		<button @click='add'>加10</button>
	</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { num }  = storeToRefs(store);
const add = () => {
	store.changeNum(10);
}
</script>

四、getters

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
  state: () => {
    return {
      num: 0,
    }
  },
  getters:{
  	getNum(){
  		return this.num + 10;
  	}
  },
  actions:{}
})

<template>
	<div>
		<!-- 有缓存只会调用一次函数 -->
		{{ getNum }}
		{{ getNum }}
		{{ getNum }}
		{{ num }}
	</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { num, getNum }  = storeToRefs(store);
</script>

pinia 数据持久化

类似于vuex的持久化

npm i pinia-plugin-persist --save

/store/index.js

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'

const store = createPinia()
store.use(piniaPluginPersist)

export default store

/store/user.js

export const useUserStore = defineStore({
  id: 'user',
  state: () => {
    return {
      name: '张三'
    }
  },

  persist: {  
    // 开启数据缓存
    enabled: true,
    strategies: [{
      // key 名字
      key: 'my_user',
      // 存储的目标
      storage: localStorage,
      // 都需要缓存什么字段
      // paths: ['name']
    }]
  }
})