pinia的基本使用

1，pinia和vuex的区别

pinia支持选项式api和组合式api 以及setup 语法糖

pinia没有mutations，只有state、getters、actions

pinia模块化没有modules，在 vuex 中实现模块化需要使用modules对TypeScript的友好支持

pinia体积小，性能较于vuex更好

2.1 Pinia 的安装

yarn add pinia
# 或者使用 npm
npm install pinia

2.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')

2.3 Pinia 模块的创建
我们可以在vue的项目中，在src文件夹下面创建一个store文件夹专门来管理我们的pinia 模块。在文件夹下面我们可以创建多个js或者ts文件来对应我们的模块。
下面就是我在store 文件夹下面创建的一个index.js模块。

import user from './user'
import keepAlive from './keepAlive'

const store = {}
export const registerStore = () => {
  store.user = user()
  store.keepAlive = keepAlive()
}
export default store

// 想要使用必须先引入 defineStore；
import { defineStore } from 'pinia';
// 这里我们使用的是es6 的模块化规范进行导出的。

// defineStore 方法有两个参数，第一个参数是模块化名字（也就相当于身份证一样，不能重复 id）

// 第二个参数是选项，对象里面有三个属性，相比于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 行不行呢？

显然在页面中我们依然能看到 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
      })
    }

通过以上代码我们也能实现数据的修改，但是有的小伙伴可能就有疑问了？为什么感觉比第一个还复杂了呢？
官方给我们的解释是 patch 可以同时修改 多个数据。

// html 代码
 <p>我是count数据{{count}}</p>
 <p>num{{num}}</p>
 <button @click="add">累计</button>

// js 代码
const store = useStore();
const add = () => {
      store.$patch({
        count: store.count + 1,
        num: store.num + 1
      })
    }

通过上面的代码，你会发现，点击按钮，两个数据都会发生变化。

3.3 $patch 方法传递一个函数来修改。
上面我们说了使用 $patch 传递一个对象来修改数据，那如果传递的是一个函数，该怎么修改呢？

// html 代码
 <p>我是count数据{{count}}</p>
 <p>num{{num}}</p>
 <button @click="add">累计</button>

// js 代码
const store = useStore();
 const add = () => {
      store.$patch(state => {
         state.count++;
         state.num++;
      })
    }
// 特别注意：如果是传递函数的话 state 就是 我们在 pinia 模块里面定义的 存储 数据的对象，不在是页面中使用的 store 对象了。

3.4 actions 里面修改数据
当然如果我们的数据，需要一个复杂的处理过程的话，我们最好把他，放到我们的 actions 里面去修改，这样的话，方便我们后期的维护。

// 首先我们需要在 actions 里面定义一个方法
import { defineStore } from 'pinia';
export const useStore = defineStore('main', {
  state(){
    return {
      count: 10,
      num: 20
    }
  },
  getters:{

  },
  
  actions:{
    piniaAdd(){ 
       this.count++;
       // 特别注意：在这里this指向的就是当前的实例化出来的对象，piniaAdd 该函数如果换成箭头函数的话，this 指向就会发生 改变，不能再使用 this.count++; 了
    }
  }
})

// 页面
// html 代码
 <p>我是count数据{{count}}</p>
 <p>num{{num}}</p>
 <button @click="add">累计</button>
// js代码
 const store = useStore();
const add = () => {
      store.piniaAdd();
}

4.pinia 固化插件的使用

npm i pinia-plugin-persist --save --include=dev
// 或者使用 yarn 安装
yarn add pinia-plugin-persist
安装完成之后，我们可以在main.js 或者 main.ts 中引入。具体代码如下：

import { createApp } from 'vue'

import App from './App.vue'

import { createPinia } from 'pinia';
// 下面是我们安装的固化插件。
import piniaPersist from 'pinia-plugin-persist'

const app = createApp(App);

const pinia = createPinia();

pinia.use(piniaPersist);

// 特别注意：固化插件是 pinia.use 并不是 app.use

app.use(pinia);

app.mount('#app')
具体模块中的使用看下面的代码：

import { defineStore } from 'pinia';
export const useStore = defineStore('main', {
  state(){
    return {
      count: 10,
      num: 20
    }
  },
  persist: { //  固化插件
    enabled: true, // 开启存储
     strategies: [ // 指定存储的位置以及存储的变量都有哪些，该属性可以不写，
        //在不写的情况下，默认存储到 sessionStorage 里面,默认存储 state 里面的所有数据。
      { storage: localStorage, paths: ["count"] },
      // paths 是一个数组，如果写了 就会只存储 count 变量，当然也可以写多个。
    ]
  },
  getters:{

  },
  
  actions:{
    piniaAdd(){
       this.count++;
    }
  }
})

补充：类似于 Vuex的辅助函数的用法
如果你还不熟悉 setup() 和 Composition API，别担心，Pinia 也支持一组类似的 map helpers like Vuex。
您以相同的方式定义存储，但随后使用 mapStores()、mapState() 或 mapActions()：

const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

const useUserStore = defineStore('user', {
  // ...
})

export default {
  computed: {
    // other computed properties
    // ...
    // gives access to this.counterStore and this.userStore
    ...mapStores(useCounterStore, useUserStore)
    // gives read access to this.count and this.double
    ...mapState(useCounterStore, ['count', 'double']),
  },
  methods: {
    // gives access to this.increment()
    ...mapActions(useCounterStore, ['increment']),
  },

ok 打完收工，欢迎指正。

参考：
作者：微笑的弧度_c50f
链接：https://www.jianshu.com/p/5f997e75f31c