0

I am new to Vuex store which is served by vue.js. and i want to use it in following scenerio.

1.Does STATE means any data which is either static or dynamic which is served by server. or say data stored in json?

TEMPLATE.

<!-- title start -->
<div class="_Handler-0-1">
  <x-x :path="store.glyph.path['0']":classs="store.static.class['0']"/>
</div>
<!-- title end -->

OBJECT

store: {
 glyph: {
   path: {
     0: '<svg>.....</svg'>
  }
 },
 static: {
   class: {
      0: 'icon-phone'
    }
  }
 }
J.Doe
  • 531
  • 1
  • 5
  • 11

2 Answers2

1

It's worth reading the documentation on vuex.

https://vuex.vuejs.org/en/intro.html

It's all about state management. You can retrieve data from the server and store it in there if you want to or you can store user entered data. It's very flexible, but the way it is designed is to ensure that it is always managed correctly

JoWinchester
  • 437
  • 4
  • 9
  • 1
    I second this, Don't be put off from reading the docs, Vue.js documentation as a whole is very well written :-) Also, your `:class` attribute has three `S`'s – Francis Leigh Feb 05 '18 at 13:43
  • components are not receiving or say fetching data from store. where i have initialized commit('load') on beforeCreate hook. – J.Doe Feb 05 '18 at 13:48
1

Vuex' has a functional life-cycle :

  • Dispatchers

  • Actions

  • Mutations

  • Getters

Dispatchers .dispatch Actions

Actions commit Mutations

Mutations mutate (change) the state

Getters return parts of the state.

I don't know the full setup of how you've done your store but to retrieve the two parts of your state i would write a getter that returns both parts.

const store = new Vuex.Store({
  state: {
    glyph: {
      path: '<svg>.....</svg>'
    },
    static: {
      class: 'icon-phone'
    }
  },
  getters: {
    glyph: state => state.glyph,

    static: state => state.static

  }
})

<template>
  <div class="_Handler-0-1">
    <x-x :path="glyph.path":class="static.path"/>
  </div>
</template>

<script>
import { ...mapGetters } from 'vuex'
export default {
  name: 'foo',
  computed: {
    ...mapGetters(['glyph', 'static'])
  }
}
</script>

Also worth mentioning that static is a reserved word.

Francis Leigh
  • 1,870
  • 10
  • 25
  • is there any particular to push bulk data to vuex ? – J.Doe Feb 05 '18 at 17:21
  • Like JoeWinchester said... You could make your request to the server in a component or service somewhere and then either map an `action` (`...mapActions(['yourAction`])`) or `dispatch` an action with your service (`store.dispatch('action', {payLoad: payloadFromServer})`) – Francis Leigh Feb 06 '18 at 09:14