Vue3引入pinia并模块化

284 阅读1分钟

1.安装pinia

npm install pinia

2.在根目录下创建store文件夹

创建index.js文件

import { createPinia } from "pinia";
//创建store实例
const store = createPinia();
export default store;

创建某个状态文件(backInfo.js)

import { defineStore } from "pinia";
export const backStore = defineStore({
  id: "backInfo",
  state: () => {
    return {
      backInfo: {
        title: "HEllO",
      },
    };
  },
});

image-20221103143714219

3.在main.js文件中引入

.....
import store from "./store/index";
createApp(App).....use(store).mount("#app");

4.获取状态文件(backInfo.js)

import { backStore } from "../store/backInfo";
const store = backStore();
console.log(store.backInfo);