vuex state

set data in component

by simati

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>
  <div id="app">
  <tabs>
    <tab name="About Us" v-show="selectedTab">
      <h1>This part is about us
      </h1>
    </tab>
    <tab name="About our culture">
      <h1>This part is about our culture
      </h1>
    </tab>
    <tab name="About our vision" selected="selectedTab" v-show="selectedTab != true">
      <h1>This part is about our vision
      </h1>
    </tab>
  </tabs>
  <p>
       click button "Go to tab" to toggle inter tabs
      </p>
  <button type="button" @click="GoTab()">Go to tab</button>
  <div>
  <br>
    selectedTab: {{selectedTab}}
  </div>
  </div>

JavaScript

const actions = {
	GoTab ({ commit }) {
    commit('MODIFY_TAB')
  }
 }

const mutations = {
	MODIFY_TAB (state, payload) {
  	state.selectedTab = !state.selectedTab
  }
}

const state = {
	selectedTab: false
}
const getters = {
	selectedTab: state => {
    return state.selectedTab
  }
}

const store = new Vuex.Store({ state, actions, mutations, getters})

new Vue({
  el: '#app',
  store,
  computed: Vuex.mapGetters(['selectedTab']),
  methods: Vuex.mapActions(['GoTab'])
})