pinia的使用

Pinia和Vuex区别

大致总结：

支持选项式api和组合式api写法
pinia没有mutations，只有：state、getters、actions
pinia分模块不需要modules（之前vuex分模块需要modules）
TypeScript支持很好
自动化代码拆分
pinia体积更小（性能更好）
如何使用Pinia

一、安装使用Pinia

1.1 安装下载

// pinia 2.1.0以上需要vue3.3支持
// vue3.3以下的可指定版本 pnpm install pinia@2.0.36
pnpm install pinia

1.2 main.ts引入

import { createPinia } from 'pinia'

app.use(createPinia())

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

import { defineStore } from 'pinia'

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

1.4 组件使用

import { useStore } from '../store'
const store = useStore();

二、State

2.1 Pinia定义state数据

state: () => {
	return {
		counter: 0,
		name: 'Eduardo',
		isAdmin: true,
	}
},

2.2 组件使用pinia的state数据

import { useStore } from '../store'
const store = useStore();
let { name } = store;

2.3 组件修改pinia的state数据

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

import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { name }  = storeToRefs(store);
const btn = ()=>{
	name.value = '123';
}

2.4 如果state数据需要批量更新

import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { name,counter,arr }  = storeToRefs(store);
const btn = ()=>{
	//批量更新
	store.$patch(state=>{
		state.counter++;
		state.arr.push(4);
		state.name = '456';
	})
}

三、actions

actions就比较简单了，写入方法，比如我们可以让state中的某一个值+=，而且传入参数

import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
  state: () => {
    return {
      counter: 0
    }
  },
  getters:{},
  actions:{
  	changeCounter( val ){
  		this.counter += val;
  	}
  }
})

组件上使用

import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { counter }  = storeToRefs(store);
const add = ()=>{
	store.changeCounter(10);
}

四、getters

getters和vuex的getters几乎类似，也是有缓存的机制

getters:{
  	counterPar(  ){
  		console.log(111);
  		return this.counter + 100;
  	}
 }

import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { counter, counterPar }  = storeToRefs(store);

Pinia持久化存储

一、安装插件

npm i pinia-plugin-persist --save

二、store/index.ts

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
 
const store = createPinia()
store.use(piniaPluginPersist)
 
export default store

三、store/user.ts

export const useUserStore = defineStore({
  id: 'user',
  state: () => {
    return {
      name: '张三'
    }
  },
  // 开启数据缓存
  persist: {
    enabled: true
  }
})

四、自定义 key

数据默认存在 sessionStorage 里，并且会以 store 的 id 作为 key。

persist: {
  enabled: true,
  strategies: [
    {
      key: 'my_user',
      storage: localStorage,
    }
  ]
}

五、持久化局部 state

默认所有 state 都会进行缓存，你能够通过 paths 指定要长久化的字段，其余的则不会进行长久化。

state: () => {
  return {
    name: '张三',
    age: 18,
    gender: '男'
  }  
},
 
persist: {
  enabled: true,
  strategies: [
    {
      storage: localStorage,
      paths: ['name', 'age']
    }
  ]
}

原文链接：https://blog.csdn.net/weixin_62765236/article/details/127448365