网站关键词优化报价,网站备案才能使用,ps自学网官方网站,普陀网站建设哪家好解释一下pinia#xff1a;
Pinia是一个基于Vue3的状态管理库#xff0c;它提供了类似Vuex的功能#xff0c;但是更加轻量化和简单易用。Pinia的核心思想是将所有状态存储在单个store中#xff0c;并且将store的行为和数据暴露为可响应的API#xff0c;从而实现数据#…解释一下pinia
Pinia是一个基于Vue3的状态管理库它提供了类似Vuex的功能但是更加轻量化和简单易用。Pinia的核心思想是将所有状态存储在单个store中并且将store的行为和数据暴露为可响应的API从而实现数据或方法在各个组件之间的共享和修改
1、新建一个vue3项目并导入pinia的依赖 npm install pinia 2、在main.ts中引入pinia
import ./assets/main.cssimport { createApp } from vue
import { createPinia } from pinia
import App from ./App.vue
import router from ./routerconst app createApp(App)const pinia createPinia()
app.use(pinia)
app.use(router)app.mount(#app)3、在src目录下新建一个stores文件夹。我们在这个文件夹中进行pinia的使用
新建一个counter.ts文件在这个文件中定义一个变量count使这个count变量能被所有的组件共享并修改其值
countrt.ts的代码如下
import { ref } from vue
import { defineStore } from piniaexport const useCounterStore defineStore(counter, () {const count ref(0)
// 定义一个方法直接清空count
const clearCount () {
count.value0
}return { count,clearCount}
})
解释一下
defineStore 是pinia使用中必须要引入的一个函数它是用于定义一个新的store的函数。
在Pinia中每个store都需要使用defineStore函数进行定义并传入一个配置对象来描述store的行为和数据。
defineStore 一般要传递两个参数第一个是store函数的名称一般这个名称要做到见名知义、第二个是这个store函数的具体逻辑。
可以在这里面定义属性、方法等。但是这些定义过的属性和方法一定要通过return交出去才行
如上图我们顶义一个count变量并通过return返回了出去。那么现在就可以在任意组件中查看count的值并进行修改了。
4、使用pinia
要在组件中使用pinia定义的store函数第一步是要先引入store import { useCounterStore } from /stores/counter; 第二步定义一个参数来接收这个useCounterStore函数 const counterStore useCounterStore(); 第三步直接在需要的位置引入counterStore中的参数即可
(可以是属性也可以是方法。但是有一点要注意就是必须要是return交出去的才可以) 从pinia中取到的数据{{ counterStore.count }} button clickcounterStore.clearCount清空count/button 属性或者方法都可以直接使用只要你在return中交出去了
启动vue3项目查看 可以看到确实能获取到pinia中定义的数据count
如果想要修改count可以直接在数值上修改 const addCount () { counterStore.count; } 定义一个按钮并绑定事件修改结果如图
这个修改是全局的你在另一个组件中也可以观察到pinia中数据的变化 但是pinia有一个不好的地方就是它默认是内存存储你只要一刷新浏览器就会丢失数据。
我们这时候可以借助pinia的持久化插件persist来解决
1、下载persist持久化插件 npm install pinia-plugin-persistedstate 2、在pinia中使用persist
import ./assets/main.cssimport { createApp } from vue
import { createPinia } from pinia
import App from ./App.vue
import router from ./router
// 1、pinia的持久化插件
import { createPersistedState } from pinia-plugin-persistedstateconst app createApp(App)//2、 接收createPersistedState函数
const piniaPersistedState createPersistedState()const pinia createPinia()
// 3、在pinia中引入持久化插件
pinia.use(piniaPersistedState)app.use(pinia)
app.use(router)app.mount(#app)3、在定义状态store的时候指定持久化配置参数{persisttrue}
import { ref } from vue
import { defineStore } from piniaexport const useCounterStore defineStore(counter, () {const count ref(0)
// 定义一个方法直接清空count
const clearCount () {
count.value0
}return { count,clearCount}
},
{persist: true})引入了pinia的持久化插件之后我们再刷新页面那么piniade的store函数中的数据也就持久的保存了。
其实这个插件底层也是使用了localstorage将数据存储到了浏览器中。
