安装

npm install pinia

main.js中配置

import pinia from '@/store/store';

app.use(pinia);

在src文件夹下面新建store文件夹

modules是模块化数据

index.js

actions getters 属性根据需求可写可不写

// 导入模块

import homeStore from '@/store/modules/home';

import { defineStore } from "pinia";

// 创建store,命名规则： useXxxxStore

// 参数1：store的唯一 id

// 参数2：对象，可以提供state actions getters

const useCounterStore = defineStore("counter", {

  // 数据 data

  state: () => {

    return {

      useHomeStore: homeStore(),

    };

  },
  
  export default useCounterStore;

store.js

import { createPinia } from 'pinia';

const pinia = createPinia();

export default pinia;

在vue文件中使用

// pinia

import { storeToRefs } from 'pinia'

import useStore from "@/store/index";
setup() {
    const store = useStore();
    
    // storeToRefs 解构数据  store.useCommonStore：模块数据
    const { footerBarList, active } = storeToRefs(store.useHomeStore);
}

在外部js文件中使用

import { storeToRefs } from 'pinia'

import pinia from '@/store/store'

import useStore from "@/store/index";

const store = useStore(pinia);


//使用模块数据

const {

  totalVol

} = storeToRefs(store.useIndexIframeStore);

//调用index.js文件里面的action里面的方法

store.Reset();

//调用模块数据文件里面的action里面的方法

//可以传参  useIndexIframeStore为模块   updateTotalVol为action方法

store.useIndexIframeStore.updateTotalVol(20);