J.Doe
J.Doe

Reputation: 541

#JSON to #Vuex store

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

Upvotes: 0

Views: 2062

Answers (2)

Francis Leigh
Francis Leigh

Reputation: 1960

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.

Upvotes: 1

JoWinchester
JoWinchester

Reputation: 437

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

Upvotes: 1

Related Questions