【转】[Vue] 在前端存储大量数据的几种方式

转自：豆包

在 Vue 程序里能够创建一个公共变量来存储大量数据，并且让多个页面都能访问。下面为你介绍几种常见的实现方式：

1. 使用 Vuex

Vuex 是专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

 

以下是一个简单的示例：
首先，安装 Vuex：

 

bash

 

 

npm install vuex@next --save

 

接着创建一个 Vuex 存储：

 

javascript

 

 

// store/index.js
import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      largeData: [] // 存储大量数据
    }
  },
  mutations: {
    setLargeData(state, data) {
      state.largeData = data
    }
  },
  actions: {
    updateLargeData({ commit }, data) {
      commit('setLargeData', data)
    }
  },
  getters: {
    getLargeData: (state) => state.largeData
  }
})

export default store

 

然后在 main.js 中引入并使用：

 

javascript

 

 

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

 

在组件中使用：

 

vue

 

 

<template>
  <div>
    <button @click="updateData">Update Data</button>
    <p>{{ largeData }}</p>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()
    const largeData = computed(() => store.getters.getLargeData)

    const updateData = () => {
      const newData = ['data1', 'data2', 'data3']
      store.dispatch('updateLargeData', newData)
    }

    return {
      largeData,
      updateData
    }
  }
}
</script>

2. 使用 provide/inject

在 Vue 3 里，可以借助 provide 和 inject 来实现跨层级的数据传递。

 

在根组件中提供数据：

 

vue

 

 

<!-- App.vue -->
<template>
  <div id="app">
    <ChildComponent />
  </div>
</template>

<script>
import { provide, ref } from 'vue'
import ChildComponent from './components/ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  setup() {
    const largeData = ref([])

    provide('largeData', largeData)

    return {}
  }
}
</script>

 

在子组件中注入数据：

 

vue

 

 

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ largeData }}</p>
  </div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const largeData = inject('largeData')

    return {
      largeData
    }
  }
}
</script>

3. 使用事件总线

在 Vue 2 中，事件总线是一种简单的跨组件通信方式。不过在 Vue 3 里，官方推荐使用 mitt 库来实现类似功能。

 

首先安装 mitt：

 

bash

 

 

npm install mitt --save

 

创建事件总线：

 

javascript

 

 

// eventBus.js
import mitt from 'mitt'

const emitter = mitt()

export default emitter

 

在组件中使用：

 

vue

 

 

<template>
  <div>
    <button @click="sendData">Send Data</button>
  </div>
</template>

<script>
import emitter from './eventBus'

export default {
  methods: {
    sendData() {
      const largeData = ['data1', 'data2', 'data3']
      emitter.emit('largeDataUpdated', largeData)
    }
  }
}
</script>

 

在另一个组件中接收数据：

 

vue

 

 

<template>
  <div>
    <p>{{ largeData }}</p>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue'
import emitter from './eventBus'

export default {
  setup() {
    const largeData = ref([])

    onMounted(() => {
      emitter.on('largeDataUpdated', (data) => {
        largeData.value = data
      })
    })

    return {
      largeData
    }
  }
}
</script>

 

这些方法各有优劣，你可以依据项目的具体需求来挑选合适的方式。