Pinia的简单使用

前言

最近发现vue中出了个Pinia，与vuex一样用来管理状态的。提前简单学习一下，免得以后用到了不会??

Pinia官网： Pinia

以下内容都是基于vue3的

基本使用

安装

npm install pinia@next

注：npm不好使的话，可以用cnpm试一下

在main.js文件中创建一个 pinia（根存储）并将其传递给应用程序

import { createPinia } from 'pinia';

app.use(createPinia());

基本格式

import { defineStore } from 'pinia'

export const useUserStore = defineStore({
  id: 'user',
  state: () =>({}),
  getters: {},
  actions: {}
})

store

Store 是一个保存状态和业务逻辑的实体，可以自由读取和写入，并通过导入后在 setup 中使用

创建

//userStore.js
// 导入 pinia
import { defineStore } from 'pinia';

// defineStore 调用后返回一个函数，调用该函数获得 Store