vue状态管理 pinia pinia-plugin-persist安装使用
pinia pinia-plugin-persist安装使用
安装
任意vue项目,我以uniapp为例
官方地址 :pinia github
1初始化package
npm init -y
2安装pinia及持久化工具pinia-plugin-persist
npm i pinia --save
npm i pinia-plugin-persist --save
使用
1项目根目录下创建文件夹pinia-store
pinia-store文件夹名字可以任意起
2在pinia-store下创建文件index.js及模块的js
文件名字可以任意起
index.js
import { createPinia } from 'pinia'
const store = createPinia()
export default store
login.js
import {
defineStore
} from 'pinia'
export const useloginStore = defineStore({
id: 'login', // id必填,且需要唯一
state: () => {
return {
token: '',
userName: '未登录',
}
},
//开启持久化
persist: {
enabled: true,
// storage:sessionStorage/localStorage,还可以自定义如下
// https://seb-l.github.io/pinia-plugin-persist/
// import Cookies from 'js-cookie'
// const cookiesStorage: Storage = {
// setItem (key, state) {
// return Cookies.set('accessToken', state.accessToken, { expires: 3 })
// },
// getItem (key) {
// return JSON.stringify({
// accessToken: Cookies.getJSON('accessToken'),
// })
// },
// }
strategies: [
{ storage: localStorage, paths: ['token','userName'] }
],
},
// actions 用来修改 state
actions: {
login(userName) {
this.userName = userName
this.token = "token-" userName
},
logout() {
this.userName = '已退出登录'
this.token = ''
}
}
})
3 main.js修改
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App,
})
app.$mount()
// #endif
// #ifdef VUE3
import {
createSSRApp
} from 'vue'
// vuex
import store from './store'
// pinia
import pstore from './pinia-store'
//pinia持久化
import piniaPersist from 'pinia-plugin-persist'
export function createApp() {
const app = createSSRApp(App)
pstore.use(piniaPersist)
app.use(pstore)
app.use(store)
return {
app
}
}
// #endif
4主程序页面
<template>
<view>
<view>
<button type="primary" @click="login('刘大根')">登录</button>
<button type="default" @click="logout">退出</button>
</view>
<!-- <view>{{userName}}</view> -->
<view>{{loginStore.userName}}</view>
</view>
</template>
<script>
// import store from '@/store/index.js'
// import {
// mapActions,
// mapState
// } from 'vuex'
import { useloginStore } from '@/pinia-store/login'
const loginStore = useloginStore()
export default {
data() {
return {
loginStore:loginStore
}
},
computed: {
// ...mapState(['userName'])
},
methods: {
// ...mapActions(['login','logout'])
login(userName){
loginStore.login(userName)
},
logout(){
loginStore.logout()
}
}
}
</script>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfkbgc
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01