pinia ｜青训营笔记这是我参与「第五届青训营」笔记创作活动的第4天。这是我在写项目中了解到的一个状态管理库，也

这是我参与「第五届青训营」笔记创作活动的第4天。

这是我在写项目中了解到的一个状态管理库。

为什么要使用pinia

Pinia是vue生态里Vuex的替代者，一个全新的vue状态管理库，它的生态环境比Vuex要更好，所以选择它比选择Vuex要更好，它的使用步骤也不难，也能够比较快的上手,而且pinia还有五大优势。五大优势如下：

可以对Vue2和Vue3做到很好的支持，也就是老项目也可以使用Pinia。
抛弃了Mutations的操作，只有state、getters和actions.极大的简化了状态管理库的使用，让代码编写更加容易直观。
不需要嵌套模块，符合Vue3的Composition api ，让代码更加扁平化。
完整的TypeScript支持。Vue3版本的一大优势就是对TypeScript的支持，所以Pinia也做到了完整的支持。如果你对Vuex很熟悉的话，会知道Vuex对TS的语法支持不是完整的。
代码更加简洁，可以实现很好的代码自动分割。Vue2的时代，写代码需要来回翻滚屏幕屏幕找变量，非常的麻烦，Vue3的Composition api完美了解决这个问题。可以实现代码自动分割，pinia也同样继承了这个优点。

如何使用pinia

先进行pinia包的安装

npm install pinia

然后创建一个store.js文件，并在其中引用pinia

import { defineStore } from 'pinia'
export default defineStore('mystore', {
    state: () => {
        return {
            elDom: '',
            els: [],
        }
    },
    getters: {},
    actions: {}
    }
})
复制代码

以上就是最简单的pinia的实例的创建

在vue3组件里读取Store数据

<template>
  <div>
      <h2>{{ myStore.els}}</h2>
  </div>
</template>

<script>
import { myStore } from "../store/index";
export default{
  setup(){
      const myStore = myStore();    
      return{
          myStore,
      }
  }
}
</script>
复制代码

先引入myStore,然后通过myStore得到myStore实例，就可以在组件里调用myStore里的state定义的状态数据了,是不是很简单呢！

定义actions中的函数

import { defineStore } from 'pinia'
export default defineStore('mystore', {
    state: () => {
        return {
            elDom: '',
            els: [],
            number: 1,
        }
    },
    getters: {},
    actions: { changeNumber(){  this.number++ } }
})
复制代码

先在actions的地方编写一个changeNumber( )方法，用来改变数据状态。

const clickActions = ()=>{ myStore.changeNumber() }
复制代码

有了这个changeNumber() 函数后，就可以在组件中调用这个函数来修改状态数据了。来到\src\components\NumberButton.vue文件。编写一个新的方法clickActions( )方法。然后就可以调用changeNumber( )方法了。

注意：在用actions的时候，不能使用箭头函数，因为箭头函数绑定是外部的this!

pinia ｜ 青训营笔记