pinia简单介绍与使用

依据Pinia官方文档，Pinia是2019年由vue.js官方成员重新设计的新一代状态管理器，更替Vuex4成为Vuex5。

1 pinia特点

• 兼容vue2和vue3版本
• 删除mutations
• 现不能与vuex 混用
• 支持插件扩展功能
• 支持模块热更新无需加载页面可以修改容器，可以保持任何现有的状态
• 更完美TS支持
• 支持服务端渲染

2 基本使用

首先我们先安装

npm install pinia

在main.js中引入pinia并创建容器挂载到根实例上

import { createPinia } from 'pinia'
const pinia = createPinia()
// 挂载
createApp(App).use(pinia).mount('#app')

创建store/index.js
容器名称 要确保唯一性 将来把所有容器挂载到隔壁容器上 根据唯一的值来获取当前容器 类似于对象的key

import { defineStore } from "pinia" // 定义容器

export const useMain = defineStore('useStore', {
  /**
   * 存储全局状态
   * 1.必须是箭头函数: 为了在服务器端渲染的时候避免交叉请求导致数据状态污染
   * 和 TS 类型推导
  */
  state: () => {
    return {
      count: 0,
      list: [1, 2, 3, 4 ]
    }
  },
  /**
   * 用来封装计算属性 有缓存功能  类似于computed
   */
  getters: {
    
  },
  /**
   * 编辑业务逻辑  类似于methods
   */
  actions: {

  }

})

页面使用

import { useMain } from '../store' // 引入store

const useStoreMain = useMain()

<template>
  <div class="greetings">
    <h1 class="green">{{ useStoreMain.count }}</h1>
  </div>
</template>

我们这里可以直接结构出想要的数据，但是数据会出现无法实现响应式问题，官方使用的API reactive 使state数据生成响应式。 对于这种情况我们可以这样做

import { storeToRefs } from 'pinia'

const { count } = storeToRefs(useStore())

引用官方API storeToRef 作用就是把结构的数据使用ref做代理

3 属性

3.1 state

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

注意state必须是箭头函数：为了在服务端渲染的时候避免交叉请求导致数据污染，有利于TS类型推导

使用上面有介绍

state: () => {
  return {
    count: 0,
    list: [ 1, 2, 3 ]
  }
}

对比vuex

const state = () => ({
  count: 0,
  list: [ 1, 2, 3 ]
})

3.2 getter

封装计算属性 有缓存功能 类似于computed
对比与vuex，pinia中的getters只是在幕后做计算,不能传递任何参数，但是可以使用getter返回一个函数接受任何参数

getters: {
  getNum(state) {
    return state.count + 1
    // return  this.count + 1
  }
}

这里需要传入state才能拿到数据，可以直接使用state和this效果是一样的

和计算属性一样的是你可以写很多getter通过this来直接访问依据官网文档

getters: {
    doubleCount: (state) => state.counter * 2,
    doubleCountPlusOne() {
      return this.doubleCount + 1
    }
  }

页面使用

<p>{{ useStoreMain.getNum }}</p>

// vuex中使用getters
<p>{{ store.getters.getNum }}</p>

3.3 actions

actions: {
  addList() {
    this.count ++
  }
}

在这里我们获取state里数据是不需要传入直接使用this,actions 方法可以互相调用直接使用this

如果我们批量更改数据建议使用$patch方法，这样我们可以优化性能

useStoreMain.$patch({
  	count: useStoreMain.count += 1
})
 
// $patch 支持函数

useStoreMain.$patch(state => {
	// state 就是容器
})

// actions 更改多个数据 也建议使用$patch

对比于VueX

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

下面引用的官方的例子

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

action触发需要通过dispatch方法触发，比于Pinia是不是感觉Pinia简单很多

以下就不对VueX中action做过多介绍 请参官方Vuex

4 数据持久化

pinia支持扩展插件

我们想实现数据持久化

npm i pinia-plugin-persist

export const useUserStore = defineStore({
  state () {
    return {
      count: 0,
      num: 100,
      list: [1, 2, 3, 4 ]
    }
  },
  persist: {
    enabled: true, // 开启缓存  默认会存储在本地localstorage
    storage: sessionStorage, // 缓存使用方式
    paths:[] // 需要缓存键 
  }
})

我们实际页面缓存

5.3 更多文档

更多文档请参考 Pinia 主页