pinia 的介绍和使用

pinia是vue2,vue2 尤其是vue3官方推荐的状态管理器，和vuex类似，但使用起来更为简单，
概念：
state:定义响应式共享变量
getter：相当于计算属性
actions：相当于方法

npm安装

npm install pinia

创建pinia ,注入到app实例中

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

定义store

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('double-counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count+=2
    },
  },
})

state属性值为函数，返回值为一个对象

使用store

defineStore创建的实例是全局共享的，是单例的。

<script setup lang="ts">

import { useCounterStore } from '@/stores/double-counter';
import  Demo  from './components/Demo.vue';

const counter= useCounterStore()

</script>

<template>

  <div class="wrapper">

      <h3>{{counter.count}}</h3>
      <button @click="counter.count++">点我</button>
      <Demo />
  </div>

</template>

<style scoped></style>