第八节 Vue3项目中安装Pinia和Pinia持久化插件

亮子 2024-03-31 02:00:01

1、安装及使用Pinia

1）、安装Pinia

npm install pinia

2）、在main.ts 中引入并挂载到根实例

// src/main.ts

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.use(ElementPlus)

app.mount('#app')

3）、src目录下新建store/study/index.js并写入

Store 是用defineStore()定义的，它的第一个参数是一个独一无二的id，也是必须传入的，Pinia 将用它来连接 store 和 devtools。

defineStore()第二个参数可接受两类值：Setup函数或Options对象

state 属性：用来存储全局的状态的，这里边定义的，就可以是为SPA里全局的状态了。

getters属性：用来监视或者说是计算状态的变化的，有缓存的功能。

actions属性：对state里数据变化的业务逻辑，需求不同，编写逻辑不同。说白了就是修改state全局状态数据的。

第一种Options式写法：

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

在Options式中:Store 的数据(data)，getters 是 Store 的计算属性(computed)，而actions则是 Store 的方法（methods）。

第二种Setup式写法：

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}

})

在Setup式中：ref()成为state属性，computed()变成getters,function变成actions。

4）、使用Store

使用上面两种方式其中一种后，便可以在组件中使用Store了。

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

2、Pinia 具体使用及属性与方法

1）、定义数据

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

2）、组件中使用

<template>
	<div>
		<h1>vue组件</h1>
		{{ name }}
	</div>
</template>

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

注：pinia可以直接修改state数据，无需像vuex一样通过mutations才可以修改，所以上面的let { name } = store 这种解构是不推荐的，因为它破坏了响应性。

而为了从 Store 中提取属性，同时保持其响应性，这里需要使用storeToRefs()，它将为每个响应性属性创建引用。当你只使用 Store 的状态而不调用任何action时，它会非常有用。使用方法如下

<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>

如果有多条数据要更新状态，推荐使用$patch方式更新。因为Pinia的官方网站，已经明确表示$ patch的方式是经过优化的，会加快修改速度，对程序的性能有很大的好处。

<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>

actions:对state里数据变化的业务逻辑，需求不同，编写逻辑不同。说白了就是修改state全局状态数据的。

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>

getters:和vuex的getters几乎类似，用来监视或者说是计算状态的变化的，有缓存的功能。

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>

3、安装Pinia持久化

1）、安装pinia-plugin-persist

npm i pinia-plugin-persist --save

2）、store/index.ts中引入并挂载

import { createPinia, defineStore } from "pinia";
import piniaPluginPersist from 'pinia-plugin-persist'

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

export default store

3）、使用方法

enabled: true即表示开启数据缓存

export const useUserStore = defineStore({id: 'userId',
  state: () => {
    return {
      userInfo:{
        name:'Ghmin',
        age:18,
        sex:'男'
        },
      id:'666666'
    }
  },
  // 开启数据缓存
  persist: {
    enabled: true
  }
})

这个时候数据默认是存在sessionStorage 里，如果想把数据存储到localStorage，则需要修改如下：

persist: {
  enabled: true,
  strategies: [
    {
      key: 'userInfo',//设置存储的key
      storage: localStorage,//表示存储在localStorage
    }
  ]
}

默认所有 state 都会进行缓存,如果你不想所有的数据都持久化存储，那么可以通过 paths 指定要长久化的字段，其余的字段则不会进行长久化，如下:

persist: {
  enabled: true,
  strategies: [
    {
      storage: localStorage,
      paths: ['id'],//指定要长久化的字段
    }
  ]
}

博主

标签

专辑