芜湖中凡网站建设公司,免费网页设计作业文件,最近军事新闻热点大事件2022,济南网站建设_美叶网络Pinia是一个用于vue的状态管理库#xff0c;类似于vuex,是vue的另一种状态管理工具。 Pinia 是 Vue 的存储库#xff0c;它允许跨组件/页面共享状态。实际上#xff0c;Pinia就是Vuex的升级版#xff0c;官网也说过#xff0c;为了尊重原作者#xff0c;所以取名pinia类似于vuex,是vue的另一种状态管理工具。 Pinia 是 Vue 的存储库它允许跨组件/页面共享状态。实际上Pinia就是Vuex的升级版官网也说过为了尊重原作者所以取名pinia而没有取名Vuex所以大家可以直接将Pinia比作为vue3的vuex。 很多人也将Pinia称为vuex5。 在Pinia中每个store都是单独存在一同进行状态管理。 一pinia与vuex的区别 与 Vuex 相比Pinia 提供了一个更简单的 API具有更少的规范提供了 Composition-API 风格的 API最重要的是在与 TypeScript 一起使用时具有可靠的类型推断支持。 1.mutations 不再存在。 2.无需创建自定义复杂包装器来支持 TypeScript所有内容都是类型化的并且 API 的设计方式尽可能利用 TS 类型推断。 3.不再需要注入、导入函数、调用函数、享受自动完成功能 4.无需动态添加 Store默认情况下它们都是动态的 5.不再有 modules 的嵌套结构 二基本配置和使用 1、安装 可以用自己常用的包管理器安装例如
pnpm install pinia yarn add pinia npm install --save pinia 2、 基本使用 ①创建pinia实例并挂载 在main.ts中
import { createApp } from vue
import ./style.css
import App from ./App.vue
// 引用
import {createPinia } from pinia
// 创建Pinia实例
const Pinia createPinia()
// 挂载pinia
createApp(App).use(Pinia).mount(#app) ② 配置状态管理专用文件在根目录下创建一个store文件并新建一个index.ts文件 ③通过import将下载好的pinia引入到index.ts中并导出 并使用defineStore创建store对象
import { defineStore } from pinia//
// 第一个参数是应用程序中 store 的唯一 id
export const useStore defineStore(main, {})
三pinia基础特性 1、state
创建stateimport { defineStore } from pinia// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore defineStore(main, {state:(){//创建状态return {text:我是pinia的一个状态变量}}
})
组件中使用templatediv!-- 3.使用 --我是测试pinia的组件--{{store.text}}/div
/templatescript langts setup
// 1.引用
import 名字 from 你pinia编写的文件
// 2.创建
let store名字()
/scriptstyle/style 1默认情况下通过 store 实例访问 state可以直接读取和写入 如clickstore.count 2通过 store.$reset() 方法可以将 state 重置为初始值。 3除了直接通过 store 修改 state还可以通过 store.$patch() 方法提交多个更改。 4可以通过 store.$subscribe() 订阅 State 的变化在 patches 修改之后订阅只会触发一次。默认情况下订阅绑定到添加它的组件当组件卸载时它们将自动删除也可以配置将其保留。 2、getters 1Getters 属性的值是一个函数接受 state 为第一个参数目的是鼓励使用箭头函数。 2非箭头函数会绑定 this建议仅在需要获取整个 store 实例的场景使用且需要显式定义函数返回类型。
import { defineStore } from piniaexport const useStoreb defineStore(mainb, {state:(){return {text:abcdefg}},actions:{},getters:{newtext(){ return this.text.toUpperCase()}}
}) 3、actions--修改 修改方式一 组件内创建触发。 ① store.你在pinia中actions中创建的修改函数
templatediv 我是测试pinia的组件--{{store.text}}button clickupdate()点我修改/button/div
/templatescript langts setup
import {useStore} from ../store/index
let storeuseStore()let update(){// 调用修改方法 store.你在pinia中actions中创建的修改函数store.TEXT_UPDATE()
}
/scriptstyle/style ② pinia中创建修改方法
import { defineStore } from piniaexport const useStore defineStore(main, {state:(){return {text:我是pinia的一个状态变量}},actions:{TEXT_UPDATE(){//修改方法this.text我变了}}
}) 修改方式二$patch
//在组件内调用$parch 便可直接修改数据
let update(){store.$patch({//你要修改state的数据: 你要修改的value值text:我是$patch直接修改})
}//方式2
let update(){store.$patch((state){console.log(state)state.text你又被改了})
}
store是一个对象在数据很多的情况下那么我们可以使用解构。但是使用解构之后数据会失去响应式这个时候我们可以使用 storeToRefs来保持数据的响应式。 templatediv我是测试pinia的组件--{{text}}button clickupdate()点我修改/button/div
/templatescript langts setup
import {useStore} from ../store/index
import {storeToRefs} from pinia
let storeuseStore()// 解构取值
// let {text}store
// storeToRefs 让数据快去取出 并且不丢失响应式
let {text}storeToRefs(store)
let update(){// 调用修改方法 store.你在pinia中actions中创建的修改函数store.updatetext()
}
/script4、action--处理异步操作 在pinia中acition不但能处理同步操作 同样也可以处理异步操作 使用方式和vuex一致
在组件中
templatediv 我是测试pinia的组件--{{store.text}}button clickdemoAxios()点我获取异步数据/button /div
/templatescript langts setupimport {useStore} from ../store/index
let storeuseStore()let demoAxios(){store.link()
}/script
在pinia中
import { defineStore } from pinia
import $http from axios
export const useStore defineStore(main, {state:(){return {text:我是pinia的一个状态变量}},actions:{async link(){try {let data await $http({url:,method:get})//需要的操作} catch (error) {console.log(失败)}}}
}) 5、$reset--重置数据 意思就是让数据恢复为state的初始值
templatediv 我是测试pinia的组件--{{store.text}}button clickupdate()点我修改/buttonbutton clickreset()点我恢复初始值/button /div
/template
script langts setup
import {useStore} from ../store/index
let storeuseStore()
let update(){store.updatetext()
}
let reset(){// $resetstore.$reset()
}
/script6、$subscribe--监听数据修改 $subscribe 监听pinia数据修改 当数据改变了 那么subscribe也会触发
templatediv 我是测试pinia的组件--{{store.text}}button clickupdate()点我修改/button /div
/template
script langts setup
import {useStore} from ../store/index
let storeuseStore()
let update(){store.updatetext()
}
// 监听store数据修改
let substore.$subscribe((params,state){console.log(params,params);//修改的操作console.log(state,state);//修改后的数据
})
/script 7、模块化 pinia中取消了modules。 pinia中定义模块只需要定义多个store即可。 因为pinia没有单一数据源这个概念在其中可以定义多个store对象
templatedivh1 第一个store{{storeone.text}}/h1h1 第二个store{{storetwo.text}}/h1 /div
/templatescript langts setup
// 引用第一个store
import {useStore} from ../store/index
// 引用第2个store
import {useStoreb} from ../store/indexb
let storeoneuseStore()let storetwouseStoreb()
/script
四pinia优势 综上pinia的优点已经很明显了 ts兼容性好 、不需要命名空间可以创建多个store、mutation删掉了pinia只具备以下几个属性状态、计算属性、动作pinia大小也会更小巧一些
