同步存储  调用

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

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

// store.jsimport 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 来显示异步数据。