1. pinia和vuex的区别
- pinia没有mutations,只有:state、 getters、 actions
- pinia分模块不需要modules(之前vuex分模块需要modules)
- pinia体积更小(性能更好)
- pinia可以直接修改state数据
2.安装pinia
npm i pinia
根据需要 安装pinia-plugin-persist插件,实现持久化存储
npm i pinia-plugin-persist
3.main.ts中导入
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia' // 从pinia中导入createPinia方法
import piniaPersist from 'pinia-plugin-persist' //导入持久化存储
const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPersist) //使用持久化存储,不需要可不写
app.use(pinia) // 使用vue实例的use方法,告诉vue我们要使用pinia
app.mount('#app')
4.创建store
新建store文件夹,新建userInfo.ts模块文件来存放用户信息相关的数据,因为pinia中没有modules区分模块,store下的每个文件就是一个模块
创建store很简单,调用pinia中的defineStore函数即可,该函数接收两个参数:
name:一个字符串,必传项,该store的唯一id。
options:一个对象,store的配置项,比如配置store内的数据,修改数据的方法等等。
我们可以定义任意数量的store,因为我们其实一个store就是一个函数,这也是pinia的好处之一,让我们的代码扁平化了,这和Vue3的实现思想是一样的。文章来源:https://www.toymoban.com/news/detail-427050.html
import { defineStore } from 'pinia' //从pinia中导入,defineStore方法,用于定义一个新的store
// 第一个参数是应用程序中 store 的唯一 id,最好和文件名同意
export const userInfoStore = defineStore('userInfo', { // 使用defineStore方法定义store
state:() => { // state表示这个store里的状态,也就是存放数据的地方
return {
userName: 'pinia定义的数据', // 这里我们定义了一个数据叫userName,用于存放我们的用户名
}
},
getters: {
double: (state) => '姓名:' + state.userName,
},
actions: {
// 修稿state的值
changeStateVal(val: any) {
this.userName = val
}
},
// 持久化存储配置
persist: {
enabled: true , // pinia-plugin-persist 是否开启持久化存储, 默认sessionStorage
strategies: [{
// key: 'userInfo', //存储的key,默认当前store的key
// paths: ['userName'], //哪个属性需要持久化存储,默认全是
storage: localStorage //使用localStorage存储
}]
}
})
5.使用store
引入使用即可,pinia中有多种方式可以修改state中的数据文章来源地址https://www.toymoban.com/news/detail-427050.html
<template>
<div>
{{ store.userName }}
<button @click="handleUpdatePinia">修改pinia数据</button>
</div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { storeToRefs } from "pinia"; //和vue中toRefs的作用一模一样
import { userInfoStore } from "../store/userInfo"; //直接引入store中定义的 userInfoStore
const store = userInfoStore(); // 然后实例化
const handleUpdatePinia = () => {
// 第一种方式:直接修改
// store.userName = 'dfads' //直接修改pinia的数据
// 第二种方式 通过$patch
// 1.
// store.$patch({
// userName: "被修改的值",
// });
// 2.
// store.$patch((state) => {
// state.userName = "被修改的值";
// });
//第三种方式 通过actions里的方法修改
store.changeStateVal("被修改的值"); //可以直接给actions里面的方法传递参数
};
</script>
到了这里,关于pinia的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!