【学习vite + vue3 + pinia + ts】pinia应用 store的创建及应用

import { defineStore } from 'pinia';
import { store } from './index'; // 假设这是你的pinia store的index文件
 
// 定义一个store，用于管理用户信息
export const useUserStore = defineStore({
  id: 'user',
  state: () => ({
    userInfo: null,
  }),
  actions: {
    // 更新用户信息的action
    updateUserInfo(info) {
      this.userInfo = info;
    },
  },
});
 
// 使用store
export default {
  install: (app) => {
    app.use(store);
  },
};
 
// 在其他组件中使用store
import { useUserStore } from './user-store';
 
export default {
  setup() {
    const userStore = useUserStore();
    // 使用store中的方法和状态
    userStore.updateUserInfo({ name: 'Alice', age: 30 });
    console.log(userStore.userInfo); // 输出: { name: 'Alice', age: 30 }
  },
};

这个例子展示了如何在Vue 3应用程序中使用Pinia来创建和使用一个store。首先定义了一个名为useUserStore的store，用于管理用户信息状态和更新用户信息的行为。然后，在其他组件中通过useUserStore这个hook来访问和修改用户信息。