vue中使用Pinia vue3+Pinia

pinia官方文档

伴随vue2到vue3的升级，官方已经用Pinia代替了Vuex成为官方的状态管理库。

1.Pinia下载

yarn add pinia 或  npm i pinia

2.Pinia导入挂载

在main.js中

import {createPinia} from 'pinia'
const pinia = createPinia();
app.use(pinia)

3.创建store状态管理库

store实例相当于一个容器，里面存放的有类似于data，计算属性，方法之类的东西。通过defineStore()方法定义。

demo演示 

1.先看vue2风格这种选项式

我们看下面这两行代码，这意味这我们可以在任意的页面来引入我们的store

我们可以在任意的页面，得到usePsonStore.name, usePsonStore.live, usePsonStore.num,

以及调用方法，来改变他们的值

由此，实现了数据共享。

// 引入store的钩子
import fuseMainstore} from './store/pson'


//获取store的实例
9const usePsonStore = useMainstore()

2.再看vue这种组合式