vue3用pinia取代vue2的vuex，学一下pinia

pinia是干嘛的

用来组件之间共享数据

怎么用

  • 先下载npm install pinia
  • 然后在main.js里引入pinia
  • 从下载的pinia里引入 createPinia函数，就可以通过createPinia函数创建了
1
2
3
4
5
6
//第一步：引入pinia
import {createPinia} from 'pinia'
//第二步：创建pinia
const pinia = createPinia()
//第三步：安装pinia
app.use(pinia)

使用Pinia里的数据

Pinia里的数据是用reactive定义的对象里的属性，所以用的时候不需要加.value

存储共享数据

  • 新建一个store文件夹
  • 在store文件夹里创建一个，名字和要存储数据的组件名一样或差不多的，js或ts文件
  • 引入defineStore函数，创建一个新函数（起不同名字来区分）调用defineStore，函数有2个参数，第一个是id名字（随便起），第二个是配置对象。
  • state要写成一个函数，返回一个对象（这个对象打印出来是reactive定义的对象，所以里面的值不用加.value），在最外面export暴露出去
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import {defineStore} from 'pinia'

export const useTalkStore = defineStore('talk',{
//真正存储数据的地方
state(){
    return {
          talkList:[
            {id:'yuysada01',content:'你今天有点怪，哪里怪？怪好看的！'},
                {id:'yuysada02',content:'草莓、蓝莓、蔓越莓，你想我了没？'},
            {id:'yuysada03',content:'心里给你留了一块地，我的死心塌地'}
          ]
        }
    }
})