通过action去触发mutation存储state数据,但是页面跳转后还是没有获取到
时间: 2024-03-03 21:53:24 浏览: 13
如果你使用了 Vuex 存储数据,但在页面跳转后仍无法获取到数据,可能是因为你没有正确地配置和使用 Vuex。
以下是一个简单的 Vuex 配置和使用示例,你可以参考一下:
1. 安装 Vuex
```
npm install vuex --save
```
2. 在 main.js 中引入并使用 Vuex
```javascript
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
myData: null
},
mutations: {
setData(state, data) {
state.myData = data
}
},
actions: {
setData({ commit }, data) {
commit('setData', data)
}
}
})
new Vue({
el: '#app',
store,
render: h => h(App)
})
```
在这个配置中,我们定义了一个包含 `myData` 属性的状态对象 `state`,以及一个 `setData` 的 mutation 和 action。`setData` mutation 用于更新 `myData` 数据,`setData` action 则用于触发 `setData` mutation。
3. 在组件中使用 Vuex
在组件中,我们可以使用 `mapActions` 和 `mapState` 工具函数来访问 Vuex 中的数据和方法。
```javascript
<template>
<div>
<p>{{ myData }}</p>
<button @click="setData">Set Data</button>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
computed: {
...mapState(['myData'])
},
methods: {
...mapActions(['setData'])
}
}
</script>
```
在这个示例中,我们通过 `mapState` 工具函数将 `myData` 数据映射到组件的 `computed` 中,通过 `mapActions` 工具函数将 `setData` 方法映射到组件的 `methods` 中。这样,我们就可以在组件中通过 `this.myData` 来访问 Vuex 中的数据,通过 `this.setData()` 来触发 `setData` action。
如果在页面跳转后仍无法获取到数据,你可以检查一下以下几点:
- 确认 Vuex 是否已经正确配置和使用。
- 确认是否正确地触发了 `setData` action。
- 确认是否正确地更新了 `myData` 数据。
- 确认是否正确地访问了 `myData` 数据。