一起学习Vue3-pinia

一起学习pinia！

— 前提准备 — 

1 项目根目录下载安装pinia

npm i pinia

2 准备一个vue页面,如a.vue

<template>
  <!-- 这是一个空的vue文件 等会用于测试pinia管理的公共数据 -->
</template>

<script setup>
  
</script>

<style>
  
</style>

3 在main.js引入和使用pinia，并存入一个数据

3-1：mian.js中加入下面代码

// 1.引入pinia
import { createPinia } from 'pinia'
let app = createApp(App);

// 2.创建pinia 注意这个写在app创建之后
const pinia = createPinia()

// 3.使用pinia
app.use(pinia)

3-2：在src下面新建一个store的文件夹，里面新建一个count.js,意思是专门管理计算相关的数据，也就是说store下可以有多个数据管理的js文件

3-3：count.js中写入如下代码，这是官方规定的写法

// 引入pinia的实际操作者（不知道咋说这个，我自己起的名哈哈）
import { defineStore } from "pinia"

// const xxx defineStore ('name-文件名保持一致',{})
export const useCountStore = defineStore('count', {
// 注意 这里state必须是一个函数 和vuex不一样
    state() {
      return {
        count: 0, // 组件要使用的公共数据
      }
    }
})

— 读取值 —

在a.vue中写入如下代码

<template>
   <h1>{{ countStore.count }}</h1>
</template>

<script setup>
  // 在要使用公共数据的组件中 引入store中的导出的方法 即useCountStore
  // useCountStore方法最终是返回了一个值 这个值就是state下面count
  import { useCountStore } from "../store/count.ts"

  // 所以可以直接调用useCountStore这个方法 就可以拿到count的值
  let countStore = useCountStore()
  console.log(countStore.count,"从store中获取的count值")
</script>

<style scoped>
  h1{
    text-align: center;
    margin-top: 50px;
  }
</style>

到这里，组件中读取pinia管理的数据就ok了。下面来看如何修改数据...

— 修改值 —

1 在页面中修改或操作pinia里的数据

方法1-直接修改：

pinia的数据修改可以直接写个方法用前面拿到的值来修改

// 定义一个方法 用来修改count的值
// 可以直接通过前面获取到的countStore.count来修改count的值
  function addFun(){
    countStore.count += 1
  }

所以a.vue中代码添加为下面代码：

<template>

   <h1>{{ countStore.count }}</h1>

   <button @click="addFun">加1</button>

</template>

<script setup>

  // 在要使用公共数据的组件中 引入store中的导出的方法 即useCountStore
  // useCountStore方法最终是返回了一个值 这个值就是state下面count
  import { useCountStore } from "../store/count.ts"

  // 所以可以直接调用useCountStore这个方法 就可以拿到count的值
  let countStore = useCountStore()
  console.log(countStore.count,"从store中获取的count值")

  // 定义一个方法 用来修改count的值
  // 可以直接通过前面获取到的countStore.count来修改count的值
  function addFun(){
    countStore.count += 1
  }

</script>

<style scoped>
  h1{
    text-align: center;
    margin-top: 50px;
  }

  button{
    display: block;
    margin: 10px auto;
    width: 60px;
  }
</style>

此时点击按钮即可实现数据加的效果，且数据是响应式的。

方法2-使用$patch：

有时候会遇到需要修改大量的数据，这时候按照上面的方法一个一个去修改就显得不太好了，所以pinia提供一个使用$patch对象的形式去修改的方法

即把修改方法改为如下：

function addFun(){
    // countStore.count += 1

    // 使用对象形式修改数据
    // 注意：这里修改的值 不会立即更新到页面中 需要使用$patch方法
    countStore.$patch({
      count: countStore.count + 1,
      count2: countStore.count + 10,
      count3: countStore.count * 20,
      // 其他需要修改的值
    })
  }

方法3-使用actions：

count.js代码如下，添加了actions部分

// 引入pinia的实际操作者（不知道咋说这个，我自己起的名哈哈）
import { defineStore } from "pinia"

// const xxx defineStore ('name-文件名保持一致',{})
export const useCountStore = defineStore('count', {
// 注意 这里state必须是一个函数 和vuex不一样
    state() {
      return {
        count: 0, // 组件要使用的公共数据
      }
    },

    actions: {
      // 组件要使用的公共方法
      addCount(val){
        console.log('addCount公共方法被调用')
        this.count += val
      }
    }
})

a.vue中代码如下，修改了addFun方法

<template>

   <h1>{{ countStore.count }}</h1>

   <button @click="addFun">加</button>

</template>

<script setup>

  // 在要使用公共数据的组件中 引入store中的导出的方法 即useCountStore
  // useCountStore方法最终是返回了一个值 这个值就是state下面count
  import { useCountStore } from "../store/count.ts"

  // 所以可以直接调用useCountStore这个方法 就可以拿到count的值
  let countStore = useCountStore()
  console.log(countStore.count,"从store中获取的count值")

  function addFun(){
  // actions中定义的方法来操作修改count数据 countStore.方法名(传参)
    countStore.addCount(10)
  }
</script>

<style scoped>
  h1{
    text-align: center;
    margin-top: 50px;
  }

  button{
    display: block;
    margin: 10px auto;
    width: 60px;
  }
</style>

— 加工值 —

1 getters修饰加工pinia数据

count.js中添加getters部分

// 引入pinia的实际操作者（不知道咋说这个，我自己起的名哈哈）
import { defineStore } from "pinia"

// const xxx defineStore ('name-文件名保持一致',{})
export const useCountStore = defineStore('count', {
// 注意 这里state必须是一个函数 和vuex不一样
    state() {
      return {
        count: 1, // 组件要使用的公共数据
       }
    },

    getters:{
      // 对state的数据进行处理 返回处理后的数据
      // 必须return一个值 这个ProcessedCount值可以直接在组件中使用
      ProcessedCount(){
        return this.count * 100
      }
    }
})

a.vue中可以直接使用getters处理后的数据

<template>

   <h1>{{ countStore.count }}</h1>

   <button @click="addFun">加</button>

   <h2>getters处理的数据：{{countStore.ProcessedCount}}</h2>

</template>

— 监听值 —

 

1 监听pinia的数据变化$subscribe

每一个store实例都有$subscribe这个方法，state的数据一发生改变，此函数就会执行

// 监听count值的变化
  countStore.$subscribe((mutation, state) => {
    console.log('count值的变化了', mutation, state)
  })

— 读值写法简化 —

 

1 storeTorefs简化读取值的写法

由于现在的模板读取store值的写法都是countStore.xxxx这样的写法，导致每次读值都需要写countStore.这个东西，storeTorefs即可简化省去这个它。

<template>

  <!-- storeToRefs后的直接写 不用再countStore.xxx-->
  <h1>{{ count }}</h1>

</template>

<script setup>

  import { useCountStore } from "../store/count.ts"

  // 引入pinia的storeToRefs方法
  import {storeToRefs} from "pinia"

  let countStore = useCountStore()

  // 其实storeToRefs方法就是类似解构
  let {count} = storeToRefs(countStore)
  console.log(count, "解构后就直接在模板写count即可")

</script> 

 本文首发于公众号【雪天前端】，欢迎关注！！