vue3中使用pinia实现数据共享

原创

已于 2023-02-07 15:13:22 修改 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2023-02-07 14:10:48 首次发布

文章介绍了如何利用Pinia在Vue3中创建一个全局的地区选择器存储，通过将数据和方法提取到外部，减少页面加载时的延迟，解决页面卡顿问题。在main.ts中引入createPinia，然后在area.js定义store，处理地图数据并分类。在页面中通过useArea获取共享数据，实现了数据的高效管理和复用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：地区选择器中，由于方法很长，加载的数据很多，导致页面每进去一次都要加载很久，造成页面卡顿。所以想要把这个数据和方法，提到外面，得到的数据，供所有页面都能正常使用。

使用pinia：

1.main.ts中

import { createPinia } from 'pinia'

2.stores/area.js

import { defineStore } from 'pinia'
import mapData from '../assets/mapData/area.json';
export const useArea = defineStore({
    id: 'area',
    state: () => {
        return {
            // navInfo: []
            province: [],
            cities : [],
            counties : []
        }

    },
    getters: {

    },
    actions: {
         getCityData(){
          var that = this
          // var data = mapData
          that.province = []
          that.cities = []
          that.counties = []
            for (var item in mapData) {
              if (item.match(/0000$/)) {
                //省
                this.province.push({ id: item, value: mapData[item], children: [] });
              } else if (item.match(/00$/)) {