Pinia的简单使用

01.什么是Pinia?

1.pinia的使用和vuex类似，可以说是vuex的替代品，是vue的一个仓库，允许跨组件、页面共享资源状态。

2.设计使用的是 Composition api 组合api 相对于vuex更符合 vue3 的设计思维。

3.pinia对于vue2和vue3都有效，并且不需要你使用组合api

2.Pinia的简单使用

2.1.Pinia的安装

在安装Pinia的时候可以使用 yarn 也可以使用 npm

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

vue2 中引入的使用

import { createPinia } from 'pinia'
const pinia = createPinia();
new Vue({
  el: '#app',
  // 其他选项...
  // ...
  // 注意同一个 `pinia` 实例可以在多个 Vue 应用程序中使用
  // 同一个页面
  pinia,
})

2.3. Pinia的模块的创建

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

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

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

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

<template>
  <div>
    <p>{{count}}</p>
  </div>
</template>
<script>
import { useStore } from '../store/index.js'
import { storeToRefs } from 'pinia';
export default {
  setup(props) {
    const store = useStore();
    return {
      ...storeToRefs(store)
    }
  }
}
</script>

显然在页面中我们依然能看到 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.2.$patch 方法传递一个对象来修改

直接上代码

// html 代码
<p>{{count}}</p>
<button @click="add">累计</button>
// js 代码
const store = useStore();
 const add = () => {
      store.$patch({
        count: store.count + 1
      })
    }

通过以上代码我们也能实现数据的修改，但是有的小伙伴可能就有疑问了？为什么感觉比第一个还复杂了呢？
官方给我们的解释是 patch是做了优化的 还有就是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
      })
    }

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

ok 打完收工，欢迎指正。