September 2020
> 🔨 From Udemy 'Devenir opérationnel rapidement en Vue et Vuex'
* * *
Demo on Github page
- Vue (or Vue.js) is an open-source front-end JavaScript framework
- Vue is the view layer of an MVC application (Model View Controller)
- Vue is currently one of the most popular JavaScript libraries/frameworks
- Unlike other popular JavaScript projects, Vue is not backed by a large corporation like React (Facebook) or Angular (Google). Vue was originally written by Evan You and the open-source community.
For browser:
For IDE:
vbase
vimport
vmethod
vdata
...
You will need Vue CLI.
vue create my-project
Select your options automatic or manual (then select features: eslint, vuex...)
cd my-project
npm run serve
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.
VueX is is like Redfux for React but with special features for Vue.
- Getters will make values able to show statically in our templates. In other words, getters can read the value, but not mutate the state.
- Mutations (commited) will allow us to update the state, but they will always be synchronous. Mutations are the only way to change data in the state in the store.
- Actions (dispatched) will allow us to update the state, asynchronously, but will use an existing mutation. This can be very helpful if you need to perform a few different mutations at once in a particular order.
store / index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})Counter.vue
<template>
<div>
<h2>Counter</h2>
<div>{{ currentValue }}</div>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script>
export default {
data () {
return {
currentValue: 0
}
},
methods: {
increment() {
this.currentValue = this.currentValue +1;
},
decrement() {
this.currentValue = this.currentValue -1;
}
},
}
</script>Counter.vue
<template>
<div>
<h2>Counter</h2>
<div>{{ currentValue }}</div>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script>
export default {
methods: {
increment() {
this.$store.commit('INCREMENT_COUNTER');
},
decrement() {
this.$store.commit('DECREMENT_COUNTER');
}
},
computed: {
currentValue() {
return this.$store.state.currentValue;
}
},
}
</script>store / index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
currentValue: 0
},
mutations: {
//METHOD(state, payload)
//Payload: other datas
INCREMENT_COUNTER(state){
state.currentValue +=1;
},
DECREMENT_COUNTER(state){
state.currentValue -=1;
},
},
actions: {
},
getters: {
},
modules: {
}
})
