vue3 pinia的安装和使用
Pinia最初是在 2019 年 11 月左右重新设计使用Composition API的 Vue Store 外观的实验。从那时起,最初的原则仍然相同,但 Pinia 适用于 Vue 2 和 Vue 3 ,并且不需要你使用组合 API。Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态Pinia 是一个用于 Vue 的状态管理库,类似 Vuex, 是 Vue 的另一种状态管理方案,P
·
Pinia最初是在 2019 年 11 月左右重新设计使用Composition API的 Vue Store 外观的实验。从那时起,最初的原则仍然相同,但 Pinia 适用于 Vue 2 和 Vue 3 ,并且不需要你使用组合 API。Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态
Pinia 是一个用于 Vue 的状态管理库,类似 Vuex, 是 Vue 的另一种状态管理方案,Pinia 2 是对应 Vue3 的版本
// 安装
npm i -S pinia
还需再安装个数据持久化插件
npm i -S pinia-plugin-persist
使用
1、在src下创建store文件夹,并在其内创建index.js文件,文件内容如下
import { createPinia } from "pinia"
import piniaPluginPersist from "pinia-plugin-persist"
const store = createPinia()
store.use(piniaPluginPersist)
export default store
接着在main.js中引入
import store from "./store";
const app = createApp(App);
app.use(store)
2、在store目录下创建一个新的js文件,比如info.js,写入以下内容(建议通过 actions 去修改 state,action 里可以直接通过 this 访问)
import { defineStore } from "pinia"
export const userStore = defineStore({
id: "info", // id是唯一的,如果有多个文件,ID不能重复
state: () => {
return {
userinfo: null,
bank_type: 1,
}
},
actions: {
setInfo(data) {
this.userinfo = data
},
setBankType(data) {
this.bank_type = data
},
// 用户退出,清除本地数据
logout() {
this.userinfo = null
sessionStorage.clear()
localStorage.clear()
},
},
// 开启数据缓存,在 strategies 里自定义 key 值,并将存放位置由 sessionStorage 改为 localStorage
// 默认所有 state 都会进行缓存,你可以通过 paths 指定要持久化的字段,其他的则不会进行持久化,如:paths: ['userinfo'] 替换key的位置
persist: {
enabled: true,
strategies: [
{
key: "users",
storage: localStorage,
},
],
},
})
3、页面使用
<script setup>
import { getCurrentInstance, ref } from "vue"
import { userStore } from "@store/info" // 引用js,路径根据你们对应配置好的路径填写
const store = userStore()
function getinfo() {
proxy.$axios
.get("", {})
.then((res) => {
if (res.data.code == 0) {
let result = res.data.data
// 调用info.js的actions中的setInfo方法
// 跟vuex有所差别,vuex是store.commit 或 store.dispatch,pinia是省去了“.commit/.dispatch”步骤
store.setInfo(result)
} else {
Toast(res.data.msg)
}
})
.catch((err) => {})
}
</script>
4、只要触发了actions中的方法就会按照上述配置好的persist缓存
自己记录一下
更多推荐
已为社区贡献16条内容
所有评论(0)