Vue3中如何使用pinia

1.安装

用自己喜欢的包管理器进行安装pinia

yarn add pinia
# 或者使用 npm
npm install pinia

2.创建实例

2-1 src目录下创建store文件夹，在store的目录下创建modules文件夹

2-1-1store文件夹下创建index.js文件来创建pinia实例

import {createPinia} from 'pinia'

const pinia = createPinia()

export default pinia

2-1-2 modules文件夹下创建对应的js文件，来定义store，例如我们创建一个user.js文件来定义用户store

import { defineStore } from "pinia";

export const useCounterStore = defineStore("user", {
  state: () => ({
    user: [],
    cartData: [],
  }),
  getters: {},
  actions: {},
});

export default useCounterStore;

2-1-3 在main.js中导入pinia实例，并使用。

import pinia from './store/index'
const app = createApp(App);
app.use(pinia)

3.组件中使用pinia

3-1在需要使用pinia的组件中导入store

注:对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾

import useCartStore from "../../store/modules/user";
const store = useCartStore();

3-2 读取store中定义的值

const user = store.user
console.log(user)