pinia用法

目录结构

scr
|--store
  |--user

创建

import { defineStore } from "pinia";

// defineStore 调用后返回一个函数，调用该函数获得 Store 实体
export const useStore = defineStore({
  // id: 必须的，在所有 Store 中唯一
  id: "user_test",
  // state: 返回对象的函数
  state: () => ({
    count: 2,
  }),
  getters: {
    // 一个基本的 Getter： 计算 count 的平方
    // 使用参数
    countPow2(state) {
      return state.count ** 2;
    },
  },
  actions: {
    increment() {
      this.count++;
    },
  },
});

用法

<script setup > 
import { useStore } from "@/store/store/user";
let store = useStore();
//state
console.log(store.count)
//getters
console.log(store.countPow2)
//actions
console.log(store.increment())

</script>

main.js中注册

import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";

let app = createApp(App);
app.config.productionTip = false;
app.use(createPinia());
app.mount("#app");