同步存储 调用
要向 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
来显示异步数据。