vue3项目实战之在线客服-②使用pinia_vue 在线客服

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

然后你就可以在一个组件中使用该 store 

<template>登陆页面</template>
 
<script setup>
import { onMounted } from "vue";
 
// 使用pinia
import { useCounterStore } from "@/stores/counter";
const counter = useCounterStore();
import { storeToRefs } from "pinia";
let { double } = storeToRefs(counter);
 
onMounted(() => {
  counter.count++;
  counter.count++;
  counter.count++;
  console.log(counter.count);
  // 获取 store中的getters属性
  console.log(double.value);
  // 调用store中的action
  counter.increment();
  console.log(counter.count);
});
</script>

 main中引用pinia

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