草庐IT

pinia 持久化存储

thingir 2023-04-10 原文

pinia刷新数据持久化解决方案

无论是使用vuex 还是pinia都会面临一个问题：页面刷新，状态数据丢失的问题；
为了解决数据状态持久化问题，可以考虑使用插件 pinia-plugin-persistedstate

  • 目录
  • 安装pinia 并引入使用
npm install pinia

安装后, 创建stores文件夹，stores文件夹下创建index.js(里面具体代码见下面配置)；
然后在src/mian.js中引入并使用pinia

import { createApp } from 'vue'
import App from './App.vue'
import store from './stores'
import './assets/main.css'

const app = createApp(App)
app.use(store)
app.mount('#app')
  • 安装插件
pnpm : pnpm i pinia-plugin-persistedstate
npm : npm i pinia-plugin-persistedstate
yarn : yarn add pinia-plugin-persistedstate
  • 配置插件
    在 stores 文件夹下的index.js中如下配置
import { createPinia } from "pinia"
import { createPersistedState } from "pinia-plugin-persistedstate"

const store = createPinia()
// 状态持久化-插件配置
store.use(createPersistedState({
    serializer:{   // 指定参数序列化器
        serialize: JSON.stringify,
        deserialize: JSON.parse
    }
}))

export default store
  • 使用插件示例
    在 stores文件夹下的main.js中使用
import { defineStore } from "pinia";

export const useMainStore = defineStore({
    id:'main',
    state: () => ({
        name: 'hello pinia'
    }),
    persist:{ // 自定义持久化方式
        storage: window.localStorage,
        beforeRestore: context => {
            console.log('Before', context)
        },
        afterRestore: context => {
            console.log('After', context)
        }
    },
    getters: {
        getName: (state) =>{
            return state.name
        }
    },
    actions:{
        SET_NAME(param){
            this.name = param
        }
    }

})
  • 页面中使用pinia状态
<script setup>
import { storeToRefs } from 'pinia'
import { useMainStore } from './stores/main'

let mainStore = useMainStore()
let { name } = storeToRefs(mainStore)
// 改名字
function changeName(){
  mainStore.SET_NAME('张三')
}
</script>

<template>
  <div>name:{{ name }}</div>
  <button @click="changeName">改名字</button>
</template>

<style scoped>
</style>

效果如下(F5刷新后依然保持更改后状态)：

参考

参考文章：https://www.modb.pro/db/417801

持久piniaquotspangt

有关pinia 持久化存储的更多相关文章

  1. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  2. ruby-on-rails - Rails 模型——非持久类成员或属性？ - 2

    对于Rails模型，是否可以/建议让一个类的成员不持久保存到数据库中？我想将用户最后选择的类型存储在session变量中。由于我无法从我的模型中设置session变量，我想将值存储在一个“虚拟”类成员中，该成员只是将值传递回Controller。你能有这样的类(class)成员吗？ 最佳答案 将非持久属性添加到Rails模型就像任何其他Ruby类一样:classUser扩展解释:在Ruby中，所有实例变量都是私有(private)的，不需要在赋值前定义。attr_accessor创建一个setter和getter方法:classUs

  3. ruby - Rack:如何将 URL 存储为变量？ - 2

    我正在编写一个简单的静态Rack应用程序。查看下面的config.ru代码:useRack::Static,:urls=>["/elements","/img","/pages","/users","/css","/js"],:root=>"archive"map'/'dorunProc.new{|env|[200,{'Content-Type'=>'text/html','Cache-Control'=>'public,max-age=6400'},File.open('archive/splash.html',File::RDONLY)]}endmap'/pages/search.

  4. ruby-on-rails - 为什么在 Rails 5.1.1 中删除了 session 存储初始化程序 - 2

    我去了这个website查看Rails5.0.0和Rails5.1.1之间的区别为什么5.1.1不再包含:config/initializers/session_store.rb？谢谢 最佳答案 这是删除它的提交:Setupdefaultsessionstoreinternally,nolongerthroughanapplicationinitializer总而言之，新应用没有该初始化器，session存储默认设置为cookie存储。即与在该初始值设定项的生成版本中指定的值相同。 关于

  5. ruby-on-rails - 尝试设置 Amazon 的 S3 存储桶 : 403 Forbidden error & setting permissions - 2

    我正在关注Hartl的railstutorial.org并已到达11.4.4:Imageuploadinproduction.我做了什么:注册亚马逊网络服务在AmazonIdentityandAccessManagement中，我创建了一个用户。用户创建成功。在AmazonS3中，我创建了一个新存储桶。设置新存储桶的权限:权限:本教程指示“授予上一步创建的用户读写权限”。但是，在存储桶的“权限”下，未提及新用户名。我只能在每个人、经过身份验证的用户、日志传送、我和亚马逊似乎根据我的名字+数字创建的用户名之间进行选择。我已经通过选择经过身份验证的用户并选中了上传/删除和查看权限的框(而不

  6. ruby - 如何打印出 Mechanized 存储的 cookie？ - 2

    我正在使用mechanize登录网站，然后检索页面。我遇到了一些问题，我怀疑这是由于cookie中的某些值造成的。当Mechanize登录网站时，我假设它存储了cookie。如何通过Mechanize打印出存储在cookie中的所有数据？ 最佳答案 代理有一个cookie方法。agent=Mechanize.newpage=agent.get("http://www.google.com/")agent.cookiesagent.cookies.to_scookie返回一个Mechanize::Cookiesobject

  7. ruby-on-rails - 闪存消息存储在哪里？ - 2

    我以为它们存储在cookie中-但不，检查cookie没有任何结果。session也不存储它们。那么，我在哪里可以找到它们？我需要这个来直接设置它们(而不是通过flashhash)。 最佳答案 它们存储在inyoursessionstore.自rails2.0以来的默认设置是cookie存储，但请检查config/initializers/session_store.rb以检查您是否使用默认设置以外的东西。 关于ruby-on-rails-闪存消息存储在哪里？，我们在StackOverf

  8. ruby-on-rails - 在 Rails 中存储(结构化)配置数据的位置 - 2

    对于我正在编写的Rails3应用程序，我正在考虑从本地文件系统上的XML、YAML或JSON文件中读取一些配置数据。重点是:我应该把这些文件放在哪里？Rails应用程序中是否有用于存储此类内容的默认位置？附带说明一下，我的应用程序部署在Heroku上。 最佳答案 我经常做的是:如果文件是通用配置文件:我在目录/config中创建一个YAML文件，每个环境有一个上层key如果我为每个环境(大项目)创建一个文件:我为每个环境创建一个YAML并将它们存储在/config/environments/然后我在加载YAML的地方创建了一个初始化

  9. ruby - 如何存储和读取 RubyVM::InstructionSequence？ - 2

    有没有办法将RubyVM::InstructionSequence存储到文件中并稍后读取？我尝试了Marshal.dump但没有成功。我收到以下错误:`dump':no_dump_dataisdefinedforclassRubyVM::InstructionSequence(TypeError) 最佳答案 是的，有办法。首先，您需要使InstructionSequence的load方法可访问，默认情况下该方法是禁用的:require'fiddle'classRubyVM::InstructionSequence#RetrieveR

  10. ruby-on-rails - 如何解析位于 Amazon S3 存储桶中的 CSV 文件 - 2

    下面是我用来从应用程序中解析CSV的代码，但我想解析位于AmazonS3存储桶中的文件。当推送到Heroku时它也需要工作。namespace:csvimportdodesc"ImportCSVDatatoInventory."task:wiwt=>:environmentdorequire'csv'csv_file_path=Rails.root.join('public','wiwt.csv.txt')CSV.foreach(csv_file_path)do|row|p=Wiwt.create!({:user_id=>row[0],:date_worn=>row[1],:inven

随机推荐