Last active
September 23, 2019 22:27
-
-
Save vandorjw/315edd82d84948fa238d643c540a449c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* An example for how a tabbed component in Vue can be done. | |
*/ | |
//VueX store | |
const store = new Vuex.Store({ | |
state: { | |
user: {} // <<<--- this is object. use Vue.set() to manipulate for reactivity!!! | |
}, | |
getters: { | |
userDetailsForTab1: state => state.user.something, | |
userDetailsForTab2: state => state.user.somethingElse, | |
userDetailsForTab3: state => state.user.somethingOther | |
}, | |
mutations: { | |
// | |
} | |
}) | |
// the component used in PersonalDetails | |
Vue.component('tab1', { | |
computed: { | |
userDetails: function () { | |
return this.$store.getters.userDetailsForTab1 | |
} | |
}, | |
created() { | |
let payload = 'someID'; | |
self.$store.commit('fetchData1', payload); // should trigger some mutation. | |
}, | |
template: `<div>{{ userDetails }}</div>` | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment