Vuex存储数据实例
目录
- Vuex存储数据实例
- 配置 Vuex 状态和 mutations
- 在组件中使用 Vuex 存储数据
- 在另一个组件中获取存储的数据
1. 配置 Vuex 状态和 mutations
2. 组件1将数据存储进Vuex
3. 由组件2将数据取出
配置 Vuex 状态和 mutations
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
userData: null
},
mutations: {
setUserData(state, data) {
state.userData = data;
}
}
});
在组件中使用 Vuex 存储数据
// ComponentA.vue
<template>
<div>
<button @click="storeData">Store Data in Vuex</button>
</div>
</template>
<script>
export default {
methods: {
storeData() {
this.$store.commit('setUserData', { name: 'John', age: 30 });
}
}
}
</script>
在另一个组件中获取存储的数据
// ComponentB.vue
<template>
<div>
<div>User Name: {{ userData.name }}</div>
<div>User Age: {{ userData.age }}</div>
</div>
</template>
<script>
export default {
computed: {
userData() {
return this.$store.state.userData;
}
}
}
</script>