Vue项目中如何用Pinia状态管理工具
这篇文章主要介绍“Vue项目中如何用Pinia状态管理工具”，在日常操作中，相信很多人在Vue项目中如何用Pinia状态管理工具问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue项目中如何用Pinia状态管理工具”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
成都创新互联公司-专业网站定制、快速模板网站建设、高性价比兴庆网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式兴庆网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖兴庆地区。费用合理售后完善，十多年实体公司更值得信赖。
Pinia与Vuex的区别
使用Pinia
defineStore( ) 方法的第一个参数：容器的名字，名字必须唯一，不能重复
defineStore( ) 方法的第二个参数：配置对象，放置state，getters，actions
state 属性： 用来存储全局的状态
getters属性： 用来监视或者说是计算状态的变化的，有缓存的功能
actions属性： 修改state全局状态数据，可以是异步也可以是同步
Pinia可以用于vue2.x也可以用于vue3.x中
yarn add pinia -S
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")
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
import {createPinia} from "pinia"
const store = createPinia();
export default store
{{tname}}
{{tid}}
tnum: {{tnum}}
{{tchangeNum}}
修改
重置
actionsBtn
import { storeToRefs } from 'pinia'
import { useStore } from '../store/user'
import { useTest } from '../store/test.js'
const testStore = useTest();
let { tname, tchangeNum, tnum } = storeToRefs(testStore)
直接修改数据的两种方式
直接修改数据与使用$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
import {createPinia} from "pinia"
import piniaPluginPresist from "pinia-plugin-presist"
const store = createPinia();
store.use(piniaPluginPresist)
export default store
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状态管理工具
标题路径：
http://cxhlcq.com/article/jsdhgi.html
重庆分公司
重庆分公司
