Vuex存储数据实例

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>