vue.js - 如何使用vuex通过vuejs中的 Prop 获取状态项

Question

对不起我的英语不好。我从 vue 中选择了 Prop 。我想通过 props 值获取 state selected item。

我来自组件。

<template>
    <h1>this.$store.state.fromSelected</h1>
</template>
<script>
    export default {
       props: ['fromSelected']
    }
</script>

在这样的 vuex 状态下

const state = {
   'one': null,
}

我像这样在根组件中使用我的 from 组件

<from from-selected="one"></from>

当我使用 this.$store.state.fromSelected 时，我想从组件中获取 this.$store.state.one。

Answer 1

看来你面临的问题与Vue和Vuex中的数据流有关。这里有两个不同的问题需要解决:

问题编号。 1 - 数据流和范围:

在您的模板代码中:<h1>this.$store.state.fromSelected</h1>您正在尝试访问 Vuex 状态下的组件属性。它不会在那里存在，因为它只存在于组件本地范围内。下面是数据流如何工作的示例:

问题编号。 2 - 静态和动态 Prop :

在行<from from-selected="one"></from>您没有在属性前加上冒号，因此 prop 将被视为字符串文字，而不是可以传入变量的表达式。在这里阅读更多:https://v2.vuejs.org/v2/guide/components-props.html#Static-and-Dynamic-Props

解决方案:

解决方案是将 Vuex 状态的值作为动态属性传递给组件；像这样:

// Javascript
const store = new Vuex.Store({
  state: {
    one: "This comes from the Vuex state"
  },
})

new Vue({
  el: "#app",
  store: store,
  components: {
    from: {
      template: '<span>{{ fromSelected }}</span>',
      props: ['fromSelected']
    }
  }
})

// Template
<div id="app">
  <from :from-selected="$store.state.one"></from>
</div>

在这里试试:https://jsfiddle.net/vngrcu5v/