Pinia：Vue3.js的状态管理器

npm i pinia

{
  "name": "pinia-demo",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "pinia": "^2.0.8",
    "vue": "^3.2.13",
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.0.1",
    "vite": "^2.4.1"
  },
  "engines": {
    "node": ">=12.22.6",
    "npm": ">=6.14.15"
  }
}

// src/main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia'
const app = createApp(App);
app.use(createPinia())

// src/stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
  // 数据 data
  state: () => {
    return { count: 0 }
  },
  // 计算属性 computed
  getters: {
    // 访问store的数据
    doubleCount: (state) => state.counter * 2,
    // 访问getters的数据
    doublePlusOne() {
      return this.doubleCount + 1
    },
  },
  // 修改数据的方法 methods
  actions: {
    increment() {
      this.count++
    },
  },
})

// src/components/Index.vue
import { mapState, mapActions } from 'pinia'
import { useCounterStore } from '@/stores/counter.js'
export default {
  computed: {
    ...mapState(useCounterStore, ['counter', 'doubleCount'])
  },
  methods: {
    ...mapActions(useCounterStore, ['increment'])
  }
}