vue3 中的 pinia 学习小记录

pinia 学习

官网传送>>

Pinia.js 是新一代的状态管理器，由 Vue.js团队中成员所开发的，因此也被认为是下一代的 Vuex，即 Vuex5.x，在 Vue3.0 的项目中使用也是备受推崇。

为什么选择 pinia

1. 完整的 typescript 的支持；
2. 足够轻量，压缩后的体积只有1.6kb;
3. 去除 mutations，只有 state，getters，actions（这是我最喜欢的一个特点）；
4. actions 支持同步和异步；
5. 没有模块嵌套，只有 store 的概念，store 之间可以自由使用，更好的代码分割；
6. 无需手动添加 store，store 一旦创建便会自动添加；

安装pinia

npm install pinia --save

入口文件中导入使用

在 main.ts 中引入并使用。

// src/main.ts

import { createApp } from "vue"
import App from "./App.vue"
import { createPinia } from "pinia"

const app = createApp(App)
// 创建 pinia 根实例
const pinia = createPinia()

app.use(pinia)
app.mount("#app")

创建store根实例

//src/store/index.ts

import { defineStore } from "pinia"

// 1、定义容器并导出容器

// 参数1 容器的ID，必须唯一，将来 pinia 会把所有的容器挂载到根容器
export const useMainStore = defineStore("main", {
  /**
   * 类似于组件的 data 用来存储全局状态的
   * 1.必须是函数：为了在服务端渲染的时候避免交叉请求导致的数据污染
   * 2.必须是箭头函数：为了更好的 TS 类型推导
   * */
  state: () => {
    return {
      num: 1
    }
  },
  /**
   * 类似于组件的computed 用来封装计算属性，与缓存的功能
   * */
  getters: {
  },
  /**
   * 类似于组件的 methods，封装业务逻辑，修改state
   * */
  actions: {}
})

store三大属性

1、state

类似于组件的 data 用来存储全局状态的

• 1.必须是函数：为了在服务端渲染的时候避免交叉请求导致的数据污染
• 2.必须是箭头函数：为了更好的 TS 类型推导

<template>
  <p>mainStore.num:{{ mainStore.num }}</p>
  <p>storeToRefs再解构的num{{ num }}</p>
  <p>{{msg}}</p>
  <p><button @click="handleCount">点击累加</button></p>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { storeToRefs } from "pinia"
import { useMainStore } from "../store"

const mainStore = useMainStore()

// ES6 直接解构会丢失响应，包一层storeToRefs 还是响应式
const { num ,msg} = storeToRefs(mainStore)

const handleCount = () => {
  // 改变数据的方式
  /**
   *  方式1：
  */
  // mainStore.num++
  /**
   * 方式2：如果需要修改多个数据，建议使用$patch 批量更新
   * */ 
  // mainStore.$patch({
  //   num: mainStore.num + 1,
  //   msg:'张三'
  // })
  /**
   * 方式3：$patch 一个函数
   * */ 
  // mainStore.$patch((state)=>{
  //   state.num++
  //   state.msg = "$patch 一个函数"
  // })
  /**
   * 方式四：逻辑多的时候，可以封装到 actions 里头
   * */ 
  mainStore.changeState() // changeState 可以传参
}
</script>

<style scoped></style>

image-20220218143011364

2、getters

类似于组件的computed 用来封装计算属性，与缓存的功能

import { defineStore } from "pinia"
export const useMainStore = defineStore("main", {
  state: () => {
    return {
      num: 1,
      msg:'vue'
    }
  },
  getters: {
    numGetters(state){
      return state.num + 10
    }
  },
})

3、actions

类似于组件的 methods，封装业务逻辑，修改state

import { defineStore } from "pinia"
export const useMainStore = defineStore("main", {
  state: () => {
    return {
      num: 1,
      msg:'vue'
    }
  },
  actions: {
    changeState(){
      this.num ++;
      this.msg = "改变来之 actions changeState"
    }
  }
})

pinia 是真香

真香~