简易记录一下学习培训pinia的一个过程

简易记录一下学习培训pinia的一个过程

1. Pinia是啥？

   Pinia 是一个根据 Vue 3 的状态管理库。 与 Vue 2 里的 Vuex 不一样，Pinia 采用了 Vue 3 里的 Composition API，因而可以更好的适用 TypeScript 和更加灵活的状态管理方法。

2. Pinia有哪些特点？

• 简易而且容易采用，它 API 设计方案就是针对 Composition API 的，所以可以容易地应用 Vue 3 的新特性。
• 适用 TypeScript，同时提供了强类型的概念，还可以在编译时捕捉不正确。
• 适用软件体制，能够轻松地拓展它的作用。
• 适用好几个 store 案例，每一个 store 案例都能够有着自己的心态与行为。
• 适用持久化存储，能将 store 中数据储存在本地存储中，确保在页面刷新后仍然能够浏览。

用法用量

1. 组装 pinia

yarn add pinia
#或使用 npm
npm install pinia

2. 在 main.ts/js文档里边开展配备

import { createApp } from 'vue'
   import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import './assets/main.css'

const app = createApp(App)
   const pinia = createPinia()
   app.use(pinia)
app.use(router)

app.mount('#app')

在main.ts/js文档内引进Pinia的createPinia()函数公式

import { createPinia } from 'pinia'

而且使用createApp(App).use()传达给运用。

const pinia = createPinia()
app.use(pinia)

3. 建立 Pinia 存放 从你应用程序中，我们需要创建一个 Pinia 存放来处理你情况。你能应用 createPinia() 函数公式来创建一个 Pinia 案例

   在src文件目录下新建/stores/counter.js 文档.

import { ref, computed } from "vue";
import { defineStore } from "pinia";
// 选择项式书写
// export const useCounterStore = defineStore(
//   "counter",

//   {
//     state: () => ({ count: 0 }),
//     // state: () => {
//     //   return { count: 0 }
//     // },
//     actions: {
//       increment() {
//         this.count  ;
//       },
//     },
//   }
// );

// 组合型书写 
export const useCounterStore = defineStore(
  "counter",
  () => {
    const count = ref(0);
    const increment =()=> {
      count.value  ;
    }
    return {
      count,
      increment
    };
  },
  {
  //...大量配备
  }
);

因为Pinia适用Composition API 而且平时用到组合型书写。 在墙上编码中defineStore有三个主要参数：

• 第一个主要参数：storeName 种类：String 叙述：store的名字。标志该store的唯一性

• 第二个主要参数：setup 种类: () => StoreDefinition<State, Getters, Actions, StoreOptions>
  叙述：相近Vue部件中setup()函数公式

• 第三个主要参数：storestoreOptions（可选择） 种类：StoreOptions 叙述：一个对象，包括一些 store 这个选项

简单的说 第一个主要参数像是一个id 给某一store关联上，给库房唯一化。 第二个主要参数明确了库房里边的初值及其转变值。第三个主要参数 是一个配备选择项，比如 persist（是否启用持久化存储）、devtools（是否启用开发环境）等。 最终应用export 抛出去useCounterStore 方式

4. Pinia的应用 在部件中应用Pinia

<script setup>
   import { useCounterStore } from '@/stores/counter'
   const counter = useCounterStore()
   const clickHanlde=()=>{
    counter.increment()
   }
</script>
<template>
  <!-- 直接在 store 中浏览 state -->
    <div>Current Count: {{ counter.count }}</div>
    <button @click="clickHanlde">加1</button>
</template>
<style scoped>

</style>

从刚刚界定的counter.js文档里引进useCounterStore()方式 打印出了一下 发觉控制面板能正常取得响应式网站数据信息

而且定义一个变量存放。与此同时界定一个js点击事件的函数公式

import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
const clickHanlde=()=>{
  counter.increment()
}

在这样一个 clickHandle函数公式里边 应用counter中界定的action 称为"increment"的办法

应用 template模板写网页页面

<template>
  <!-- 直接在 store 中浏览 state -->
  <div>Current Count: {{ counter.count }}</div>
  <button @click="clickHanlde">提升</button>
</template>

在模版里边应用{{ counter.xxx }}能正常得到大家放进pinia的信息 这时 当点击图标“加1”时 store里边的count会到原先的前提下

我们不难发现这时count 早已增强了

这时更新电脑浏览器，发觉count却为0，电脑浏览器并没替我们将要count 放到 存贮空间内。

解决方法：因为pinia里面没有带有的持久化存储，所以我们要应用要持久化存储的软件 pinia-plugin-persistedstate npm详细地址：pinia-plugin-persistedstate 文本文档通道:pinia-plugin-persistedstate

1. 组装 pinia-plugin-persistedstate 软件

npm i pinia-plugin-persistedstate
#或使用 npm
yarn add pinia-plugin-persistedstate

2. 安装完毕后 必须在main.ts/js文档中进行配备

import { createApp } from 'vue'
import { createPinia } from 'pinia'
   import piniaPluginPersistedstate  from 'pinia-plugin-persistedstate'

import App from './App.vue'
import router from './router'

import './assets/main.css'

const app = createApp(App)
const pinia = createPinia()
   pinia.use(piniaPluginPersistedstate)
app.use(pinia)
app.use(router)

app.mount('#app')

引进了piniaPluginPersistedstate 而且使用app.use()传达给了应用软件。

3.接着再store里边加上配备选择项

import { ref, computed } from "vue";
import { defineStore } from "pinia";


// 选择项式书写
// export const useCounterStore = defineStore(
//   "counter",

//   {
//     state: () => ({ count: 0 }),
//     // state: () => {
//     //   return { count: 0 }
//     // },
//     // 也要这样界定
//     // state: () => ({ count: 0 })
  //     persist: true,
//     actions: {
//       increment() {
//         this.count  ;
//       },
//     },
//   }
// );

// 组合型书写 
export const useCounterStore = defineStore(
  "counter",
  () => {
    const count = ref(0);
    const increment =()=> {
      count.value  ;
    }
    return {
      count,
      increment
    };
  },
  {
      persist: true,
  },

);

其实就是神话中defineStore的第三个主要参数里边的配置项

这时pinia已经能够正常启动替我们存放数据 而且也完成了分布式锁配置