Pinia的简单利用

程序员 · 2024-10-6 14:06:44

1.什么是Pinia？

1.pinia 和 vuex 具有雷同的功效，是 Vue 的存储库，它答应您跨组件/页面共享状态。
2.筹划利用的是 Composition api，更符合vue3的筹划头脑。
3.Pinia 对 Vue 2 和 Vue 3 都有用，而且不必要您利用组合 API。
2.Pinia 的利用

2.1 Pinia 的安装

在安装Pinia的时间可以利用yarn 也可以利用 npm
yarn add pinia# 大概利用 npmnpm install pinia2.2 Pinia 的引入

一般我们在做项目的时间，都会在main.js 大概 main.ts 中引入。
vue3 中引入的利用
import { createApp } from 'vue'import App from './App.vue'import { createPinia } from 'pinia';const app = createApp(App);const pinia = createPinia();app.use(pinia);app.mount('#app')vue2 中引入的利用
import { createPinia } from 'pinia'const pinia = createPinia();new Vue({  el: '#app',  // 其他选项...  // ...  // 注意同一个 `pinia` 实例可以在多个 Vue 应用程序中利用  // 同一个页面  pinia,})2.3 Pinia 模块的创建

我们可以在vue的项目中，在src文件夹下面创建一个store文件夹专门来管理我们的pinia 模块。在文件夹下面我们可以创建多个js大概ts文件来对应我们的模块。
下面就是我在store 文件夹下面创建的一个index.js模块。
// 想要利用必须先引入 defineStore；import { defineStore } from 'pinia';// 这里我们利用的是es6 的模块化规范进行导出的。// defineStore 方法有两个参数，第一个参数是模块化名字（也就相当于身份证一样，不能重复）// 第二个参数是选项，对象内里有三个属性，相比于vuex 少了一个 mutations.export const useStore = defineStore('main', {  state(){  // 存放的就是模块的变量 return {    count: 10 }  },  getters:{ // 相当于vue内里的盘算属性，可以缓存数据  },  actions:{ // 可以通过actions 方法，改变 state 内里的值。       }})2.4 Pinia 数据页面的利用

我们以vue3 页面为例，简单先容一下，Pinia页面的利用。
<template>  <div> <p>{{store.count}}</p>  </div></template><script>// 这里引入我们导出的 useStore；import { useStore } from '../store/index.js'export default {  setup(props) { // 值得注意的是 useStore 是一个方法，调用之后会给我们返回一个对象。  //  这个时间，你就会发现，页面上就能正常表现我们在index.js 内里的 state 内里界说的 count 数据。 const store = useStore(); return {    store }  }}</script>固然如果你vuex辅助函数用的非常纯熟的话，你就会产生疑问，在上面代码 p 标签中，我不写store.count。直接写成 count 行不可呢？
<template>  <div> <p>{{count}}</p>  </div></template><script>import { useStore } from '../store/index.js'import { storeToRefs } from 'pinia';export default {  setup(props) { const store = useStore(); return {    ...storeToRefs(store) }  }}</script>显然在页面中我们依然能看到 count 数据被展示在页面上，我们是利用 pinia 给我们提供的 storeToRefs 来睁开的。细致的小伙伴，会发现他着实和我们在 vue3 中利用的 toRefs 非常的像。
3.pinia 中修改 state 数据的方法。

3.1 直接修改 store 对象的数据

// html 代码<p>{{count}}</p><button @click="add">累计</button>// js 代码const store = useStore();const add = () => {    store.count ++  }通过上面的代码，我们会发现，当我点击button 按钮累加的时间，页面中 count 数据就跟着发生了厘革。
3.1 $patch 方法转达一个对象来修改。

废话不多说，我们还是直接上代码。
// html 代码<p>{{count}}</p><button @click="add">累计</button>// js 代码const store = useStore(); const add = () => {    store.$patch({       count: store.count + 1    }) }
通过以上代码我们也能实现数据的修改，但是有的小伙伴大概就有疑问了？为什么感觉比第一个还复杂了呢？
官方给我们的表明是

Pinia的简单利用

所属分类: 问答交流

新帖推荐: 30日

推荐作品