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

Pinia(/piːnjʌ/)

安装与快速上手([email protected][email protected])

安装

npm install [email protected]

在 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>