位置: IT常识 - 正文

在Vue3项目中使用pinia代替Vuex进行数据存储(在vue3项目中使用vue2)

编辑:rootadmin
pinia是一个vue的状态存储库,你可以使用它来存储、共享一些跨组件或者页面的数据,使用起来和vuex非常类似。pina相对Vuex来说,更好的ts支持和代码自动补全功能。本篇随笔介绍pinia的基础用法以及持久化存储的一些用法,供参考学习。pinia在2019年11月开始时候是一个实验项目,目... ...

推荐整理分享在Vue3项目中使用pinia代替Vuex进行数据存储(在vue3项目中使用vue2),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3项目中使用el-dialog,vue项目使用rem,vue3项目中使用el-dialog,vue项目使用rem,vue3项目中使用el-dialog,vue3项目中使用el-dialog,vue3项目中使用el-dialog,在vue3项目中使用vue2,内容如对您有帮助,希望把文章链接给更多的朋友!

pinia是一个vue的状态存储库,你可以使用它来存储、共享一些跨组件或者页面的数据,使用起来和vuex非常类似。pina相对Vuex来说,更好的ts支持和代码自动补全功能。本篇随笔介绍pinia的基础用法以及持久化存储的一些用法,供参考学习。

pinia在2019年11月开始时候是一个实验项目,目的就是重新设计一个与组合API匹配的vue状态存储。基本原则和原来还是一样的,pinia同时支持vue2和vue3,且不要求你必须使用Vue3的组合API。不管是使用vue2或者vue3,pinia的API是相同的,文档是基于vue3写的。

Pinia 是 Vuex4 的升级版,也就是 Vuex5; Pinia 极大的简化了Vuex的使用,是 Vue3的新的状态管理工具;Pinia 对 ts的支持更好,性能更优, 体积更小,无 mutations,可用于 Vue2 和 Vue3;Pinia支持Vue Devtools、 模块热更新和服务端渲染。

1、pinia的安装和使用

安装pinia(https://pinia.vuejs.org/)

npm install pinia

在main.j或者main.ts中引入使用

import { createPinia } from 'pinia'app.use(createPinia())

下面就是使用pinia的一个例子。这样你就创建了一个状态存储。

// stores/counter.jsimport { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', { state: () => { return { count: 0 } }, // 也可以这样定义状态 // state: () => ({ count: 0 }) actions: { increment() { this.count++ }, },})

在组件中使用:

import { useCounterStore } from '@/stores/counter'export default { setup() { const counter = useCounterStore() counter.count++ // 编辑器会有代码提示 counter.$patch({ count: counter.count + 1 }) // 也可以使用action来代替 counter.increment() },}如果你不是很喜欢setup函数和组合API,pinia也有类似vuex的map的功能。你可以用上面的方式定义你的store,但是使用时用mapStores(), mapState(),或者 mapActions():const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }), getters: { double: (state) => state.count * 2, }, actions: { increment() { this.count++ } }})const useUserStore = defineStore('user', { // ...})export default { computed: { // 其他计算属性 // ... // 可以使用 this.counterStore 和 this.userStore获取 ...mapStores(useCounterStore, useUserStore) // 可以使用 this.count 和this.double获取 ...mapState(useCounterStore, ['count', 'double']), }, methods: { // 可以使用 this.increment()调用 ...mapActions(useCounterStore, ['increment']), },}

与vue4之前的版本相比,pinia的API是有很多不同的,即:

去掉了mutation。因为好多人认为mutation是多余的。以前它方便devtools集成,现在这不是个问题了。不用在写复杂的ts类型包装,所有的都是有类型的,API设计的都是尽量符合ts的类型推断不再使用一个莫名其妙的字符串了,只需要导入一个函数,调用他们就行了,同时还有代码自动补全不需要动态添加store了,因为它们现在本来就是动态。如果你想,你随时可以手动去写一个store。没有复杂的嵌套模块了。你仍然可以在一个store中导入其他的store来实现嵌套模块,但是pinia还是推荐使用一个扁平的结构。但是即使你使用循环依赖也没关系。不再需要命名空间了。因为现在store本来就是扁平结构了。你也可以理解为所有的store本来就有命名空间了。你的应用中的全局数据需要保存在store中。在很多地方你都要使用这些数据,比如说,用户信息需要在导航栏中显示,也需要在个人中心显示。还有些数据,需要暂存起来,比如一个需要分好几页填写的表单。在pinia中,store是通过defineStore()方法定义的,它的第一个参数就是一个唯一的名字:import { defineStore } from 'pinia'export const useStore = defineStore('main', { // other options...})

上面只是定义了store,在setup函数中调用了useStore()时,才会创建store:

import { useStore } from '@/stores/counter'export default { setup() { const store = useStore() return { // 你可以返回store这个对象,然后就可以在template中使用了 store, } },}

在store实例化以后,你就可以调用到store中定义的state、getters和actions了。为了让解构的值还保持响应式,你需要用到storeToRefs()方法。它会给响应式的数据创建ref。

import { storeToRefs } from 'pinia'export default defineComponent({ setup() { const store = useStore() // `name` 和 `doubleCount` 是响应式的 // 插件增加的属性也会创建ref // 但是会自动跳过action或者不是响应性的属性 const { name, doubleCount } = storeToRefs(store) return { name, doubleCount } },})

默认情况下,你可以在store实例上直接获取或者修改state:

const store = useStore()store.counter++

也可以调用$reset()方法来把state恢复为初始值:

const store = useStore()store.$reset()

除了直接修改store里的值store.counter++,你也可以是用$patch方法。你可以同时修改多个值:

store.$patch({ counter: store.counter + 1, name: 'Abalam',})

或者$patch接收一个函数作为参数,来简化改变数组的写法:

store.$patch((state) => { state.items.push({ name: 'shoes', quantity: 1 }) state.hasChanged = true})2、pinia的持久化存储处理你可以用$subscribe()来侦听state的改变,持久化一般存储在localStorage和sessionStorage。

localStorage和sessionStorage差别

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。

localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。

sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标 签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。

JSON对象提供的parse和stringify将其他数据类型转化成字符串,再存储到storage中就可以了,操作的方式:

存:

var obj = {"name":"xiaoming","age":"16"}

在Vue3项目中使用pinia代替Vuex进行数据存储(在vue3项目中使用vue2)

localStorage.setItem("userInfo",JSON.stringify(obj));

取:

var user = JSON.parse(localStorage.getItem("userInfo"))

删除:

localStorage.remove("userInfo);

清空:

localStorage.clear();

pnia 使用订阅机制subscribe来实现数据的持久化存储的代码如下所示。

const instance = useMainStore();// 订阅数据变化,变化时存储 instance.$id 这是storeIdinstance.$subscribe((mutation, state) => { localStorage.setItem(instance.$id, JSON.stringify(state));});//init 初始的时候获取const val = localStorage.getItem(instance.$id);if (val) { instance.$state = JSON.parse(val);}

也可以通过watch实现

watch( pinia.state, (state) => { // persist the whole state to the local storage whenever it changes localStorage.setItem('piniaState', JSON.stringify(state)) }, { deep: true })

但是需要注意,这种方式持久化会提示pinia未安装挂载,所以需要在pinia挂载后再调用,这里可以将它封装成方法导出,在挂载后调用

xport const initStore = () => { const instance = useMainStore(); // 订阅数据变化,变化时存储 instance.$id 这是storeId instance.$subscribe((mutation, state) => { localStorage.setItem(instance.$id, JSON.stringify(state)); }); //init 初始的时候获取 const val = localStorage.getItem(instance.$id); if (val) { instance.$state = JSON.parse(val); }}默认情况下,state侦听会和组件绑定在一起(如果store是在组件的setup中)。这意味着,当组件卸载时,侦听会自动被移除。如果你需要在组件被卸载时,侦听仍然保持,需要给$subscribe()方法传递第二个参数true:export default { setup() { const someStore = useSomeStore() // 组件卸载后,侦听也会有 someStore.$subscribe(callback, true) // ... },}

或者watch状态的变化

watch( pinia.state, (state) => { // 在state改变时,保存在localStorage中 localStorage.setItem('piniaState', JSON.stringify(state)) }, { deep: true })3、使用pinia插件持久化存储

pinia plugin persist官方网站:pinia-plugin-persist

持久化存储也可以通过安装插件的方式,安装 pinia-plugin-persist 来实现。

npm i pinia-plugin-persist --save

使用main.js

import { createPinia } from 'pinia'import piniaPluginPersist from 'pinia-plugin-persist'const store = createPinia()store.use(piniaPluginPersist)createApp(App).use(store).mount('#app')

在对应的store中开启,数据默认存在 sessionStorage 里,并且会以 storeId 作为 key

import { defineStore } from 'pinia'// 'main' 是storeIdexport const useMainStore = defineStore('main', { state: () => ({ counter: 2, name: 'Eduardo', isAdmin: true }), // …… // 开启数据缓存 persist: { enabled: true }})

如果需要自定义key和存储位置,则修改参数即可。

persist: { enabled: true, strategies: [ //使用插件自定义存储 { key: 'settings', // key可以自己定义,不填的话默认就是这个store的ID storage: localStorage, } ] },4、在实际项目中使用pinia

一般项目开发,实际上存储的内容会比较多,可能根据不同的键值模块进行区分,因此把它们放在一个store/modules里面,方便的使用引用它来存取设置数据即可。

我们这里简单以一个settings的配置信息进行介绍,其中index.ts是一个统一的创建pinia的对象并挂接到全局App上的。

其中index.ts的代码如下所示。

import type { App } from "vue";import { createPinia } from "pinia";import piniaPluginPersist from 'pinia-plugin-persist';//使用插件持久化const store = createPinia();store.use(piniaPluginPersist) //使用插件持久化export function setupStore(app: App<Element>) { app.use(store);}export { store };

因此在main.js里面引入并挂接pinia即可。

import { createApp } from 'vue'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'import 'normalize.css' // css初始化import App from './App.vue'import { setupStore } from "/@/store";const app = createApp(App)setupStore(app)app.use(ElementPlus)app.mount('#app')

这样我们就可以再次定义一个模块化的配置信息,以便于管理存储各种不同类型的内容。

如下面我们定义一个程序配置信息setttings.ts

import { defineStore } from "pinia";import { store } from "/@/store";export type settingType = { title: string; fixedHeader: boolean; hiddenSideBar: boolean; };export const useSettingStore = defineStore({ id: "settings", state: (): settingType => ({ title: "Vue3 + TypeScript + Element", fixedHeader: false, hiddenSideBar: false }), persist: { enabled: true, strategies: [ //使用插件自定义存储 { key: 'settings', // key可以自己定义,不填的话默认就是这个store的ID storage: localStorage, } ] }, getters: { getTitle() { return this.title; }, getFixedHeader() { return this.fixedHeader; }, getHiddenSideBar() { return this.HiddenSideBar; } }, actions: { CHANGE_SETTING({ key, value }) { // eslint-disable-next-line no-prototype-builtins if (this.hasOwnProperty(key)) { this[key] = value; } }, changeSetting(data) { this.CHANGE_SETTING(data); } }});export function useSettingStoreHook() { return useSettingStore(store);}

然后在组件视图vue或者app.vue中使用即可

<script lang="ts">import { defineComponent } from "vue";import { useSettingStoreHook } from "/@/store/modules/settings";import { storeToRefs } from "pinia";export default defineComponent({ name: "app", components: { }, setup() { const store = useSettingStoreHook(); const { fixedHeader, title } = storeToRefs(store); return { fixedHeader, title, }; }, methods: { setTitle() { this.title = "Vue3 + TypeScript + Element + Edit"; console.log(this.title); }, },});</script>

查看数据修改后,存储在本地存储空间中的内容,如下所示。

本文链接地址:https://www.jiuchutong.com/zhishi/302807.html 转载请保留说明!

上一篇:java下界通配符的用法(java中通配符作用)

下一篇:handsome主题V6.0 完美破解开心版-Typecho主题(handsome主题破解)

  • 怎样判断企业是不是适合做微信营销?(怎样判断企业是否是小微企业)

    怎样判断企业是不是适合做微信营销?(怎样判断企业是否是小微企业)

  • 拼多多如何关闭先用后付设置(拼多多如何关闭拼小圈的购买记录)

    拼多多如何关闭先用后付设置(拼多多如何关闭拼小圈的购买记录)

  • 帮别人辅助可以取消嘛(帮别人辅助可以刷脸吗)

    帮别人辅助可以取消嘛(帮别人辅助可以刷脸吗)

  • 剪映草稿箱删除的可以恢复嘛(剪映草稿箱删除的视频怎么提高清晰度)

    剪映草稿箱删除的可以恢复嘛(剪映草稿箱删除的视频怎么提高清晰度)

  • 指纹锁不灵敏怎么办(指纹锁不灵敏怎么调)

    指纹锁不灵敏怎么办(指纹锁不灵敏怎么调)

  • 微博绑定支付宝账号未激活(微博绑定支付宝网络超时)

    微博绑定支付宝账号未激活(微博绑定支付宝网络超时)

  • 微信如何切换夜间模式(微信如何切换夜间模式华为)

    微信如何切换夜间模式(微信如何切换夜间模式华为)

  • 华为nova5ipro怎么设置返回按键(华为nova5ipro怎么添加门禁卡)

    华为nova5ipro怎么设置返回按键(华为nova5ipro怎么添加门禁卡)

  • 叨叨记账怎么获取体力值(叨叨记账怎么获得邮票)

    叨叨记账怎么获取体力值(叨叨记账怎么获得邮票)

  • 华为nova闪光灯怎么开(华为nova闪光灯怎么)

    华为nova闪光灯怎么开(华为nova闪光灯怎么)

  • 华为默认字体是什么字体(华为默认字体大小是多大)

    华为默认字体是什么字体(华为默认字体大小是多大)

  • 整机保修是什么意思(整机保修1年什么意思)

    整机保修是什么意思(整机保修1年什么意思)

  • 苹果11是否支持双卡双待(苹果11是否支持无线充电功能)

    苹果11是否支持双卡双待(苹果11是否支持无线充电功能)

  • 手机老是断网是什么原因(手机老是断网是怎么回事)

    手机老是断网是什么原因(手机老是断网是怎么回事)

  • 手机wps绘制表格(手机wps绘制表格怎么操作)

    手机wps绘制表格(手机wps绘制表格怎么操作)

  • soul怎么看见访客(soul如何看到访客记录)

    soul怎么看见访客(soul如何看到访客记录)

  • 钉盘文件怎么转到微信(钉盘文件如何转移到我的文件)

    钉盘文件怎么转到微信(钉盘文件如何转移到我的文件)

  • 抖音注销后粉丝还在吗(抖音注销后粉丝还能看到我吗)

    抖音注销后粉丝还在吗(抖音注销后粉丝还能看到我吗)

  • 如何调节小爱灵敏度(怎么把小爱同学的灵敏度调高一点)

    如何调节小爱灵敏度(怎么把小爱同学的灵敏度调高一点)

  • 小米6如何连接电脑(小米6如何连接苹果手机)

    小米6如何连接电脑(小米6如何连接苹果手机)

  • 苹果13promax哪个颜色好看详情(苹果13promax哪个颜色最贵)

    苹果13promax哪个颜色好看详情(苹果13promax哪个颜色最贵)

  • Win11安装提示the pc must support tpm2.0怎么办?(win11安装失败0xc1900201)

    Win11安装提示the pc must support tpm2.0怎么办?(win11安装失败0xc1900201)

  • win7电脑时间同步出错解决方法(windows7电脑时间不对)

    win7电脑时间同步出错解决方法(windows7电脑时间不对)

  • loginctl命令  控制systemd登录管理器(linux中login命令)

    loginctl命令 控制systemd登录管理器(linux中login命令)

  • 10分钟用Python编写贪吃蛇小游戏(python编程bim)

    10分钟用Python编写贪吃蛇小游戏(python编程bim)

  • phpcms作者名不显示怎么解决

    phpcms作者名不显示怎么解决

  • 变更税务所怎么操作
  • 增值税专用发票可以开电子发票吗
  • 对公账户余额和实际不符
  • 代扣代缴完税凭证 要勾选吗
  • 叉车上牌流程需要多少时间
  • 施工单位开具发票税务税率
  • 银行承兑汇票到期日期怎么算
  • 其他预算收入科目核算内容
  • 应交税金进项税的会计分录
  • 收到美元货款兑换人民币流程
  • 固定资产清理先提折旧再清理吗
  • 固定资产已折旧完报废如何处理
  • 哪些费用应该计税
  • 进项发票税点属于什么科目?
  • 一般纳税人提供服务税率
  • 增值税开票金额在哪里看
  • 福利费用属于什么费用
  • 事业单位取得的财政拨款免税吗
  • 制造业领用材料规章制度的好处
  • 递延所得税怎么产生
  • 小规模纳税人增值税超过30万怎么纳税
  • 汽车加油票可以开专票吗
  • 金蝶怎么一次性删除所有分录
  • windows11怎么设置默认应用
  • 中级会计考试考后审核需要什么资料
  • 在window10中可以使用什么窗口
  • 华为鸿蒙系统网速慢怎么解决
  • 出口退税新政策对出口贸易的影响
  • php最新动态
  • 局域网游戏电脑
  • win10商店无法加载
  • 企业所得税会计准则
  • 奇托尔加赫城堡
  • 用应付票据付应付账款
  • linux的网络编程
  • 分配股利怎么算
  • vue-router
  • 提取现金 备发工资
  • php 图片
  • c罗my eyes never lie
  • 毕业设计基于web难还是JAVA
  • 防抖节流实现原理
  • 子公司吸收合并母公司 特殊性税务处理
  • 餐饮行业的增值税
  • 结转损益利息收入在哪方
  • 员工意外伤害保险最多赔多少
  • mysql 服务器配置
  • 施工企业的汇兑损失属于财务费用
  • 商场一般是怎么缴纳租金的
  • 多计提的折旧费怎么做账
  • 收到境外支付的咨询费免税吗
  • 高新企业税收减免多少
  • 为员工保险取得的增值税抵扣
  • 企业法人从公司怎么拿钱
  • 投标保证金支付给谁
  • 存货损失营业外支出
  • 未确认融资费用计算公式
  • 工厂宿舍水电费怎么扣
  • 公司现金支票取现要缴税吗
  • linux配置mysql数据库远程连接失败的解决方法
  • XP系统怎么设置双屏幕
  • windows server vista
  • win7 ready
  • linux安装的命令是啥
  • Win10 Mobile RedStone预览版14267更新内容汇总(持续更新)
  • win10预览版好吗
  • Linux系统中下载文件的wget命令操作实例
  • h1标签的使用完全正确的是
  • 怎么看判断
  • 安卓手机本地
  • unitymol
  • javascript设计简单计算机
  • android源码下载地址
  • 安徽残疾人补助过年有多少钱
  • 运输专票怎么开发票
  • 怎样在电子税务局申报社保
  • 怎么在国税网站取消已申报的财务报表
  • 加工修理修配统称为什么
  • 别墅与普通住宅的优缺点
  • 地税局面试
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设