做质粒图谱的网站,php快速建站系统,搜索引擎推广方案,河南那家做网站实力强状态管理 我们知道组件与组件之间可以传递信息#xff0c;那么我们就可以将一个信息作为组件的独立状态#xff08;例如#xff0c;单个组件的颜色#xff09;或者共有状态#xff08;例如#xff0c;多个组件是否显示#xff09;在组件之传递#xff0c…状态管理 我们知道组件与组件之间可以传递信息那么我们就可以将一个信息作为组件的独立状态例如单个组件的颜色或者共有状态例如多个组件是否显示在组件之传递这样的话我们希望这个信息在所有组件中共享这样就可以监控所有组件的状态但是一般的信息传递方式想要在所有组件传递一个信息会形成一个复杂的关系网不利于管理且中间组件若产生异常这个关系网就会断裂整个网页的组件就会变的无法监控
所以我们需要一个工具来管理所有组件的状态他需要以下几点功能
1.能够注册一个全局状态store形成一个中间件让所有组件都能访问到
2.当这个全局状态被某一个组件影响改变时它能够让其他组件更新这个状态
3.将信息独立出来不因为一个组件错误产生全局错误 vuex和pinia
vuex和pinia都是vue的状态管理工具它们的作用相同用法几乎没有区别但是pinia的结构更加简洁同时对Ts的兼容性更强。
vuex和pinia的核心
vuexpiniastate --- 状态信息state --- 状态信息getter --- 选择性的读取信息getter --- 选择性的读取信息mutation --- 可以执行同步操作action --- 可以执行同步和异步操作action --- 可以执行异步操作 返回一个mutation vuex和pinia的关系
Pinia 起源于一次探索 Vuex 下一个迭代的实验因此结合了 Vuex 5 核心团队讨论中的许多想法。最后我们意识到 Pinia 已经实现了我们在 Vuex 5 中想要的大部分功能所以决定将其作为新的推荐方案来代替 Vuex。
这两个工具相似度很高作用也一致当你熟练掌握其中一个时另一个也能够轻松使用这里我们还是使用pinia作为项目的状态管理器
pinia的基本使用
手动引入pinia
新建一个vue项目
npm create vuelatest
输入完项目名称后一路回车即可对于是否引入pinia的选项我们暂时不选则 这里我们在src的目录下新建一个文件夹store并在store下新建一个index.js然后删除components文件夹的原内容并新建两个vue文件 安装pinia包
npm install pinia 安装完成后可以在package中看到然后我们开始导入pinia
main.js:
import ./assets/main.cssimport { createApp } from vue
import App from ./App.vue
import { createPinia } from piniacreateApp(App).use(createPinia()).mount(#app) 导入完成后我们在index.js中配置pinia
index.js:
import {defineStore} from piniaexport const useStore defineStore(counter, {state: () {return {// 定义状态counter: 0}},// 定义计算属性getters: {// 定义计算属性getCounter: (state) {return state.counter5?state.counter:数据不足}},// 定义操作actions: {// 定义操作addCounter() {this.counter}}// 定义其他选项// ...
}) 注意 第一个参数counter是返回store的一个标识在一个项目中我们可以新建多个store来表示多个状态每个状态都有一个标识第二个参数是一个对象里面包含了state定义状态可以返回多个值任意类型表示状态getter定义了一个属性运算的方法可以用来过滤数据只拿需要的数据外部使用这个方法时不带括号action定义了一个操作可以 是异步操作外部调用是要带括号
然后我们再对App.vue,myComA.vue,myComB.vue引入store中间件
App.vue,
script setup
import myComA from ./components/myComA.vue
import myComB from ./components/myComB.vue
import { useStore } from ./store/index.js
const store useStore()/scripttemplatep{{ store.getCounter }}/pbutton clickstore.addCounter()counter {{ store.counter }}/buttonmyComA/myComB/
/template
myComA.vue,
script setup//组合式API
import { useStore } from ../store/index
const store useStore()/scripttemplatedivmyComA/divp{{ store.counter }}/p
/template
myComB.vue
script setup//组合式API
import { useStore } from ../store/index
const store useStore()/scripttemplatedivmyComB/divp{{ store.counter }}/p
/template
这里要注意import引入index文件的路径有所不同
完整这些后我们启动项目
npm run dev 点击一次按钮store的counter值就加一当这个值大于等于5时会在App.vue中显示出来否则显示数据不足App.vue,myComA.vue,myComB.vue 3个组件中均有显示说明3个组件都访问到了数据它们绑定了一个共同的信息即便我们移除了myComB.vue其他组件也没有受到影响 这样我们就为每个组件都设置了一个状态
系统引入pinia
掌握了手动引入pinia后我们可以再新建一个项目查看以下系统的pinia
npm create vuelatest 我们可以看到它是有一个stores文件夹的同时再main.js,counter.js,package.json中也是有对应的配置的 我们可以观察到它的配置方式和我们手动配置的方式有所不同
其实这个pinia的配置类似于setup函数的结构有选择式风格和组合式风格这里采用的是组合式风格2者的效果是完全一致的可以自行对比两种方法
我们可以引入之前项目中App.vue,myComA.vue,myComB.vue 3个组件注意这里的方法和文件名称有所改变再启动项目查看
app.vue:
script setup
import myComA from ./components/myComA.vue
import myComB from ./components/myComB.vue
import { useCounterStore } from ./stores/counter.js
const store useCounterStore()/scripttemplatep{{ store.doubleCount }}/pbutton clickstore.increment()counter {{ store.count }}/buttonmyComA/myComB/
/templatemyComA.vue:
script setup//组合式API
import { useCounterStore } from ../stores/counter.js
const store useCounterStore()/scripttemplatedivmyComA/divp{{ store.count }}/p
/templatemyComB.vue:
script setup//组合式API
import { useCounterStore } from ../stores/counter.js
const store useCounterStore()/scripttemplatedivmyComB/divp{{ store.count }}/p
/template
npm run dev可以看到实现了状态共享在实际应用中我们使用系统引入pinia后可以自己手动的将pinia的相关文件调整成我们需要的结构 扩展:pinia数据持久化
登录状态的数据问题 pinia的状态共享功能最常见的使用就是登录状态的共享它可以保存当前页面的一个登录状态这样当你在登录页面登录成功后其他页面可以共享这个登录状态在一个页面退出登录后其他页面也能够共享这样网页就能区分用户和游客了。 但是pinia是基于内存实现的当你刷新页面后pinia保存的可共享数据就会刷新这样我们就需要重新登录我们希望用户登录后登录状态应该由网络请求返回的token一段有时间限制会过期的数据保存所以我们需要实现pinia的数据持久化让页面刷新后仍可以保留登录状态
实现数据持久化 想在浏览器内存下一串数据不会因为刷新而清空我们可以想到localStorage就有这个功能
pinia提供了一个插件基于localStorage实现了数据的缓存这样页面刷新后pinia会先从localStorage中读取数据一般是token验证用户的登录状态这样就不用反复登录了
pinia-plugin-persistedstate
安装插件快速开始 | pinia-plugin-persistedstate (prazdevs.github.io)
npm i pinia-plugin-persistedstate
安装完成后可以在package.json中查看 注册插件
在main.js中注册引入
import { createApp } from vue
import { createPinia } from pinia
import {piniaPluginPersistedstate} from pinia-plugin-persistedstateconst app createApp(App)
const pinia createPinia()
pinia.use(piniaPluginPersistedstate)app.use(pinia)
app.mount(#app)在store下创建pinia对象的文件内启用插件 import { ref, computed } from vue
import { defineStore } from piniaexport const useCounterStore defineStore(counter, () {const count ref(0)const doubleCount computed(() count.value * 2)function increment() {count.value}return { count, doubleCount, increment }},{persist: true,//开启路由缓存},
)App.vue
script setup
import {useCounterStore} from /stores/counterconst {count,increment} useCounterStore();
increment();//action方法使用pinia的数据
console.log(count);
/script
template/template
style scoped/style
这个counter存储的数据就会被保留在本地了 这样每次打开执行这个自增的 方法时会先从原来保存的数据执行而不会因为刷新内存丢失掉数据从0开始执行
总结 pinia是一个状态管理工具它可以保存一个状态数据和一些方法提供给给全局的组件共享。简单来说pinia可以设置全局的响应量和方法所有组件都可以访问到这些响应量和方法并产生对应的变化
