Pinia（一）初体验快速安装与上手

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

Pinia(/piːnjʌ/)

安装与快速上手(Vue3@3.2.37+Vite@1.0.0)

安装

npm install pinia@2.0.17

在 main.js 中引入和使用

import { createPinia } from 'pinia'

const app = createApp(App);
app.use(createPinia());

创建 src/store/index.ts

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
    }
  },
  getters: {
    doubleCount: (state) => {
      return state.count * 2;
    }
  },
  actions: {
    increment(a: number) {
       this.count += a
    }
  }
})

在组件使用

import { useCounterStore } from '../store/';
import TestPiniaSon from './TestPiniaSon.vue'

const store = useCounterStore();

function countPlus() {
  store.increment(1);
}

<div>
  <h2>{{store.count}}</h2>
  <button @click="countPlus">countPlus</button>
</div>