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>
)
