Vuelancer- Vuex is a state management library for Vue.js applications. It provides a global or centralized state and it can be accessed in any vue components. State objects can be mutated also. Generally, state is used to store the values, mutations is used to mutate the values stored in store.
Basic Setup
In this example, I haven't used Vue framework setup. Instead, I used vue with HTML.
Include the Vue 3 and Vuex 4 (latest release as of now!) inside the
<head>tag.
<head>
<script src="https://unpkg.com/vue@next" defer></script>
<script src="https://unpkg.com/vuex@4.0.0-beta.4/dist/vuex.global.js"
defer></script>
</head>
Basic Vue 3 app setup
- Vue 3 main component can be created using
Vue.createApp(<object_variable>)and then vue app will be mounted to the HTML dom element.
const v1 = {
// updated soon...
};
var app = Vue.createApp(v1);
app.mount("#container");
- Generally, inside vue object we can have data, methods, computed property, hooks like onmounted(), etc.
Vuex Store
- Vuex store can be created using
Vuex.createStore()
const store = Vuex.createStore({
state() {
return {
// ...
};
},
mutations: {
// ...
},
getters: {
// ...
},
actions: {
// ...
}
});
Basic vuex properties
- State - data
- Mutations - methods
- Actions - used to call or commit a mutation (method)
- Getters - filtered data
Basic counter application built using vue3 & vuex
- Demo - https://vue-vuex.glitch.me
<body>
<div id="container">
<h1>
Vue-Vuex-Counter application
</h1>
<p class="counter">
Counter: {{ count }}
</p>
<button @click="increment">
+
</button>
<button @click="decrement">
-
</button>
<p>
{{greater}}
</p>
</div>
</body>
const v1 = {
computed: {
count() {
return store.state.count;
},
greater() {
return store.getters.isGreater;
}
},
methods: {
increment() {
store.dispatch("increment");
},
decrement() {
store.dispatch("decrement");
}
}
};
const store = Vuex.createStore({
state() {
return {
count: 0
};
},
mutations: {
increment(state) {
state.count++;
},
decrement(state) {
if (state.count > 0) {
state.count--;
}
}
},
getters: {
isGreater: state => {
if (state.count > 10) {
return "Greater than 10";
} else {
return "Do increment!!!";
}
}
},
actions: {
increment({ commit }) {
commit("increment");
},
decrement({ commit }) {
commit("decrement");
}
}
});
var app = Vue.createApp(v1);
app.use(store);
app.mount("#container");
- State objects can be accessed by
store.state.<state-object-key-name> - Mutations can be called or commit by
store.commit(specific-mutation) - Actions will be dispatched by
state.dispatch(action_name) - Getters can be accessed by
state.getters.<getters_name>
Some of my youtube videos
