如何使用vuex通过vuejs中的props获取状态项

Question

我很抱歉我的英语不好。 我来自vue的选择道具。我想通过道具价值获得州选项目。

我来自组件。

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

像这样的vuex状态

const state = {
   'one': null,
}

我在root组件中使用my from component

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

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

Answer 1

您遇到的问题似乎与Vue和Vuex中的数据流有关。这里有两个不同的问题需要解决：

问题nr。 1 - 数据流和范围：

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

问题nr。 2 - 静态和动态道具：

在行<from from-selected="one"></from>中，您没有使用冒号前置属性，因此prop将被视为字符串文字，而不是可以传入变量的表达式。在此处阅读更多内容：https://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/

Answer 2

您是否尝试使用相同的语法设置 fromSelected ？

<from fromSelected="one"></from>

Answer 3

Ifound。我必须这样写。

// From.vue component
<template>
   <span>{{this.fromSelected}}</span>


 </template>
    <script>
       export default {
            props: ['fromSelected']
       }
    </script>



// Root component
    import from from 'from';

    <from :from-selected="this.$store.state.one"></from>



// State 
export default {
   'one': null,
}