Vue项目中Pinia能做什么,怎样使用
Pinia官网介绍说:Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。Vuex同样可以作为状态管理工具,那么两者有什么区别呢?
Pinia与Vuex的区别
- pinia只有store、getter、actions,么有mutations,简化了状态管理的操作。
- pinia模块划分不需要modules,
- pinia自动化代码拆分
- pinia对ts支持很好以及vue3的composition API
- pinia体积更小,性能更好
使用Pinia
defineStore( )
方法的第一个参数:容器的名字,名字必须唯一,不能重复defineStore( )
方法的第二个参数:配置对象,放置state,getters,actionsstate
属性: 用来存储全局的状态getters
属性: 用来监视或者说是计算状态的变化的,有缓存的功能actions
属性: 修改state全局状态数据,可以是异步也可以是同步Pinia
可以用于vue2.x也可以用于vue3.x中
- 安装
yarn add pinia -S
登录后复制
main.js
引入
import {
createApp}
from "vue"
import App from "./app.vue"
import store from "./store/index.js"
const app = createApp(App);
const store = createPinia();
app.use(store).mount("#app")
登录后复制
- 在store文件夹下新建test.js
import {
definePinia}
from "pinia"
export default testStore = definePinia('testId',{
state:()=>
{
tname:"test",
tnum:0,
}
,
getters:{
changeTnum(){
console.log("getters")
this.tnum++;
}
}
,
actions:{
addNum(val){
this.tnum += val
}
}
,
//持久化存储配置
presist:{
enable:true,//
strategies:[
{
key:"testId",
storage:localStorage,
paths:['tnum']
}
]
}
}
)
登录后复制
登录后复制
在用actions的时候,不能使用箭头函数,因为箭头函数绑定是外部的this。actions里的this指向当前store
- 在store文件夹下新建index.js,便于管理
import {
createPinia}
from "pinia"
const store = createPinia();
export default store
登录后复制
- 新建
A.vue
组件,引入store模块和storeToRefs
方法storeToRefs
:解构store
中的数据,使之成为响应式数据
template>
div>
div>
{
{
tname}
}
/div>
div>
{
{
tid}
}
/div>
div>
tnum: {
{
tnum}
}
/div>
div>
{
{
tchangeNum}
}
/div>
div>
button @click="tchangeName">
修改/button>
/div>
div>
button @click="treset">
重置/button>
/div>
div @click="actionsBtn">
actionsBtn/div>
/div>
/template>
登录后复制
script setup>
import {
storeToRefs }
from 'pinia'
import {
useStore }
from '../store/user'
import {
useTest }
from '../store/test.js'
const testStore = useTest();
let {
tname, tchangeNum, tnum }
= storeToRefs(testStore)
/script>
登录后复制
直接修改数据的两种方式
直接修改数据与使用$path
修改数据相比,官方已经明确表示$patch
的方式是经过优化的,会加快修改速度,对程序的性能有很大的好处。所以如果你是多条数据同时更新状态数据,推荐使用$patch
方式更新。
虽然可以直接修改,但是出于代码结构来说, 全局的状态管理还是不要直接在各个组件处随意修改状态,应放于actions
中统一方法修改(piain没有mutation)。
//直接修改数据
tchangeName(){
tname.value = "测试数据";
tnum.value++;
}
//当然也可以使用`$path`批量修改
tchangeName(){
testStore.$path(state=>
{
state.tname = "测试数据";
state.value = 7;
}
)
}
登录后复制
使用actions修改数据
直接调用actions
中的方法,可传参数
const actionsBtn = (){
testStore.addNum(5)
}
登录后复制
重置state中数据
store
中有$reset
方法,可以直接对store
中数据重置
const treset = (){
testStore.$reset()
}
登录后复制
Pinia持久化存储
- 实现持久化存储,需要配合以下插件使用
yarn add pinia-plugin-persist
登录后复制
- 配置
store
文件夹下的index.js
文件,引入pinia-plugin-presist
插件
import {
createPinia}
from "pinia"
import piniaPluginPresist from "pinia-plugin-presist"
const store = createPinia();
store.use(piniaPluginPresist)
export default store
登录后复制
- 配置stroe文件夹下的test.js文件,使用
presist
属性进行配置
import {
definePinia}
from "pinia"
export default testStore = definePinia('testId',{
state:()=>
{
tname:"test",
tnum:0,
}
,
getters:{
changeTnum(){
console.log("getters")
this.tnum++;
}
}
,
actions:{
addNum(val){
this.tnum += val
}
}
,
//持久化存储配置
presist:{
enable:true,//
strategies:[
{
key:"testId",
storage:localStorage,
paths:['tnum']
}
]
}
}
)
登录后复制
登录后复制
enable:true
,开启持久化存储,默认为使用sessionStorage
存储
-strategies
,进行更多配置
-key
,不设置key时,storage的key为definePinia
的第一个属性,设置key值,则自定义storage的属性名storage:localStorage
,设置缓存模式为本地存储paths
,不设置时对state
中的所用数据进行持久化存执,设置时只针对设置的属性进行持久化存储
Pinia模块化实现
模块化实现即在store对要使用的模块新建一个js文件,比如user.js
文件。然后配置内容跟其他模块一样,根据自己需求进行设置,然后在对应页面引入。
Pinia中store之间互相调用
比如:test.js
获取user.js
中state
的name
属性值,在test.js
引入user.js
import {
defineStore }
from 'pinia'
import {
userStore }
from "./user.js"
export const useTest = defineStore("testId", {
state: () =>
{
return {
tid: "111",
tname: "pinia",
tnum: 0
}
}
,
getters: {
tchangeNum() {
console.log('getters')
return this.tnum + 100
}
}
,
actions: {
tupNum(val) {
console.log('actions')
this.tnum += val;
}
,
getUserData() {
console.log(useStore().name);
return useStore().name;
}
,
}
,
persist: {
//走的session
enabled: true,
strategies: [
{
key: "my_testId",
storage: localStorage,
paths: ['tnum']
}
]
}
}
)
登录后复制
user.js
中
import {
defineStore }
from 'pinia'
export const useStore = defineStore('storeId', {
state: () =>
{
return {
num: 0,
name: '张三'
}
}
}
)
登录后复制
A.vue
组件中,调用test.js
中getUserData
方法就可以得到uesr.js
中的name
值
const actionBtn = () =>
{
testStore.getUserData()
}
;
到此这篇关于“Vue项目中Pinia能做什么,怎样使用”的文章就介绍到这了,感谢各位的阅读,更多相关Vue项目中Pinia能做什么,怎样使用内容,欢迎关注网络资讯频道,小编将为大家输出更多高质量的实用文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: Vue项目中Pinia能做什么,怎样使用
本文地址: https://pptw.com/jishu/652505.html