vuej에서 vuex를 사용하여 소품을 통해 상태 항목을 가져오는 방법

vuej에서 vuex를 사용하여 소품을 통해 상태 항목을 가져오는 방법

영어가 서툴러서 미안해.나는 vue에서 선택된 소품들을 보았다.소품 값을 통해 상태 선택 항목을 받고 싶다.

부품에서 나왔어.

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

이거 쓸 때.$store.state.selected에서 이것을 받고 싶다.$store.state.component에서 1달러.

당신이 직면하고 있는 문제는 Vue와 Vuex의 데이터 흐름과 관련이 있는 것 같다.여기서 해결해야 할 두 가지 다른 문제가 있다.

문제 nr. 1 - 데이터 흐름 및 범위:

템플릿 코드:<h1>this.$store.state.fromSelected</h1>Vuex 상태에서 구성 요소 속성에 액세스하려는 경우.그것은 구성 요소 로컬 범위에만 존재하기 때문에 그곳에 존재하지 않을 것이다.다음은 데이터 흐름의 작동 방식을 보여 주는 그림이다.

문제 nr. 2 - 정적 및 동적 특성:

줄을 서서.<from from-selected="one"></from>당신은 대장을 가지고 그 속성을 미리 말하는 것이 아니므로, 소품은 당신이 변수를 전달할 수 있는 표현이 아닌 문자 그대로의 문자열로 간주될 것이다.자세한 내용은 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>

참조URL: https://stackoverflow.com/questions/50529505/how-to-get-state-item-via-props-in-vuejs-with-vuex