How to get state item via props in vuejs with vuex

Question

I'm sorry for my bad english. I've fromSelected props in vue. I want to get state selected item via props value.

I've from component.

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

in vuex state like this

const state = {
   'one': null,
}

I use my from component in root component like this

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

When I use this.$store.state.fromSelected I want to get this.$store.state.one in from component.

Checkout the answer to this question I answered the other day; it explains how to get a store objects state in your current component https://stackoverflow.com/questions/50489786/vue-js-and-vue-datepicker-save-a-picked-period-in-the-global-state/50490730#50490730 — John, May 25 '18 at 12:48
Do you want to pass the value from the state to the component? Like this: `State -> Controller -> Use inside template`? — atlazor, May 25 '18 at 13:00

score 1 · Accepted Answer · edited Jul 15 '22 at 05:51

It seems that the problem you are facing has to do with the flow of the data in Vue and Vuex. There are two different problems that need to be addressed here:

Problem nr. 1 - Data Flow and Scopes:

In your template code: <h1>this.$store.state.fromSelected</h1> you are trying to access the component property in the Vuex state. It will not exist there as it only exists in the components local scope. Here is an illustration of how the flow of data would work:

Problem nr. 2 - Static and Dynamic Props:

In the line <from from-selected="one"></from> you are not prepending the property with a colon and therefore the prop will be considered a string literal and not an expression where you could pass in a variable. Read more here: https://v2.vuejs.org/v2/guide/components-props.html#Static-and-Dynamic-Props

Solution:

The solution would be to pass in the value from the Vuex state as a dynamic property to the component; like this:

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

Try it here: https://jsfiddle.net/vngrcu5v/

score 0 · Answer 2 · edited May 25 '18 at 14:34

0

Did you try to put fromSelected with same syntax?

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

edited May 25 '18 at 14:34

serge.karalenka

980
1
15
29

answered May 25 '18 at 13:19

CyrielleDev

156
6

In Vue.js you would specify the props as camelCase when defining the controller and use hyphen-case when using the components props in HTML. – atlazor May 25 '18 at 13:25
Ah ok , i never use camelCase .. thk – CyrielleDev May 25 '18 at 13:41

score 0 · Answer 3 · answered May 25 '18 at 13:28

0

Ifound. I must write like this.

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

answered May 25 '18 at 13:28

Mireli Eyyubzade

193
1
4
13

1

Is this based on my fiddle https://jsfiddle.net/vngrcu5v/ ? If so, do you want me to clean up the answer so it will be more understandable for others finding this question? – atlazor May 25 '18 at 13:39
1

yes. Your code is perfect. I just use your code. thanks for all – Mireli Eyyubzade May 25 '18 at 13:57
1

No worries. I have made a more complete answer now to address all the problems. Please accept my answer if it is correct. – atlazor May 25 '18 at 14:19

How to get state item via props in vuejs with vuex

3 Answers3

Problem nr. 1 - Data Flow and Scopes:

Problem nr. 2 - Static and Dynamic Props:

Solution: