vuexでvuejsの小道具を介して状態項目を取得する方法

あなたが直面している問題は、VueとVuexのデータの流れに関係しているようです。ここで対処する必要がある2つの異なる問題があります。

問題番号1-データフローとスコープ：

テンプレートコード： <h1>this.$store.state.fromSelected</h1>  Vuex状態のコンポーネントプロパティにアクセスしようとしています。コンポーネントのローカルスコープにのみ存在するため、そこには存在しません。データの流れがどのように機能するかを以下に示します。

問題番号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/

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,
}

入れようとしましたかfromSelected 同じ構文で？

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