Pinia基础知识

官方文档

安装

yarn add pinia
npm install pinia

开始

导入pinia

Store是什么？

Store (如 Pinia) 是一个保存状态和业务逻辑的实体，它并不与你的组件树绑定。换句话说，它承载着全局状态。它有点像一个永远存在的组件，每个组件都可以读取和写入它。它有三个概念，state、getter 和 action，我们可以假设这些概念相当于组件中的 data、 computed 和 methods。

使用

创建一个store

import {
    defineStore } from 'pinia'

// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useCounterStore = defineStore('counter', {
   
    state: () => {
   
        return {
   
            count: 0,
            name: '三',
            firstName: '张'
        }
    },
    actions: {
   
        increment() {
   
            console.log('this:', this)
            this.count++;
        }
    },
    getters: {
   
        getFullName() {
   
            return this.firstName+this.name;
        }
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

引用这个store

<template>
  <div>
    <h1>{
   {
   store.count}}</h1>
    <h1>{
   
1
2
3
4
5
6