vuex 同步数据和异步数据存储和调用

最新推荐文章于 2025-03-06 16:21:24 发布

原创最新推荐文章于 2025-03-06 16:21:24 发布

· 843 阅读

2 ·

版权

文章标签：

#前端 #javascript #开发语言

文章介绍了如何在Vuex中进行同步和异步数据存储。同步存储通过定义mutation修改state，而异步存储则利用action处理异步操作，然后提交mutation更新state。

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

同步存储调用

要向 Vuex 中存储同步数据，你可以通过定义一个 mutation 来修改 state 中的数据。下面是一个简单的示例：

首先，在你的 Vuex 模块中定义一个 state 和一个 mutation：

// store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    data: null
  },
  mutations: {
    setData(state, payload) {
      state.data = payload;
    }
  }
});

export default store;

// 页面存储

export default {
  methods: {
    saveData() {
      const data = 'your data';
      this.$store.commit('setData', data);
    }
  }
}

// 在组件中获取 Vuex 中的数据
this.$store.state.data

这样，当你调用 saveData 方法时，会触发 setData mutation，将数据存储到 Vuex 的 state 中。

需要注意的是，mutation 必须是同步的，因此在 mutation 中不应该进行异步操作。如果需要进行异步操作，你可以使用 Vuex 的 actions 来处理。

异步存储调用

要向 Vuex 存储异步数据，你可以使用 action。在 Vuex 中，action 用于处理异步操作，并最终提交 mutation 来修改 state。

首先，在你的 Vuex store 中定义一个 action：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    asyncData: null
  },
  mutations: {
    SET_ASYNC_DATA(state, data) {
      state.asyncData = data
    }
  },
  actions: {
    fetchAsyncData({ commit }) {
      // 模拟异步请求
      setTimeout(() => {
        const data = '异步数据'
        commit('SET_ASYNC_DATA', data)
      }, 1000)
    }
  }
})

export default store

// 页面存储
<template>
  <div>
    <button @click="fetchData">获取异步数据</button>
    <p>{{ asyncData }}</p>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['asyncData'])
  },
  methods: {
    ...mapActions(['fetchAsyncData']),
    fetchData() {
      this.fetchAsyncData()
    }
  }
}
</script>

当你点击按钮时，会触发 fetchData 方法，该方法会调用 fetchAsyncData action。fetchAsyncData action 会模拟一个异步请求，并在请求完成后提交 SET_ASYNC_DATA mutation 来修改 Vuex 的 state 中的 asyncData。

你可以在模板中使用 asyncData 来显示异步数据。