Как получить элемент состояния через реквизит в vuejs с vuex - PullRequest
Новая
       12

Как получить элемент состояния через реквизит в vuejs с vuex

0 голосов
/ 25 мая 2018

Извините за мой плохой английский.Я из выбранных реквизитов в VUE.Я хочу получить состояние выбранного элемента через значение реквизита.

Имею компонент. 

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

в состоянии vuex, как это 

const state = {
   'one': null,
}

Я использую свой изкомпонент в корневом компоненте вот так 

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

Когда я использую this. $ store.state.fromSelected Я хочу получить this. $ store.state.one в от компонента.

Ответы [ 3 ]

0 голосов
/ 25 мая 2018

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,
}
0 голосов
/ 25 мая 2018

Кажется, что проблема, с которой вы сталкиваетесь, связана с потоком данных в Vue и Vuex.Здесь нужно решить две разные проблемы:

№ задачи.1 - Поток данных и области действия:

В коде шаблона: <h1>this.$store.state.fromSelected</h1> вы пытаетесь получить доступ к свойству компонента в состоянии Vuex.Там его не будет, так как он существует только в локальной области компонентов.Вот иллюстрация того, как будет работать поток данных:

enter image description here

№ задачи.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/

0 голосов
/ 25 мая 2018

Вы пытались поставить из выбранного с тем же синтаксисом? 

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