时间戳

首页 > 解决方案 > Vue：拥有依赖于 Vuex 存储属性的组件的最佳 Vuex 实践

vue.js - Vue：拥有依赖于 Vuex 存储属性的组件的最佳 Vuex 实践

问题描述

在这个简单组件的示例中，如果模板需要一个属性来渲染，该属性将是 Vuex 存储的数据，那么直接从属性中读取是否更好，如下所示：

<template>
   <div>
      <div>
         {{ this.$store.getters.getProduct.title }}
      </div>
      <div>
         {{ this.$store.getters.getProduct.name }}
      </div>
   </div>
</template>

或者将初始数据值设置为存储值并像这样使用：

<template>
   <div>
      <div>
         {{ this.currentProduct.title }}
      </div>
      <div>
         {{ this.currentProduct.name }}
      </div>
   </div>
</template>

<script>
    export default {
        data() {
            return {
                currentProduct: this.$store.getters.getProduct
            }
        }
    }
</script>

标签： vue.jsvuejs2vuex

解决方案

您可以使用mapStateVuex 并将其传播到组件的计算属性中以直接获取状态。考虑到您currentProduct的商店中有一个状态...

<template>
  <div>
    <div>{{ currentProduct.title }}</div>
    <div>{{ currentProduct.name }}</div>
  </div>
</template>


<script>
import { mapState } from 'vuex';

export default {
  ...
  computed: {
    ...mapState(['currentProduct']).
  }
}
</script>

如果您想从您的状态转换一些数据，只需使用 getter。https://vuex.vuejs.org/guide/getters.html

推荐阅读