Source code learning in the Vuex project Example (1)
counter
the code runs
Download the code from github (https://github.com/vuejs/vuex).
npm install
You may encounter errors as follows
[email protected] install: `node install.js`
can be executed
npm install --ignore-scripts
npm run dev
The project can run. You can access the project through http://localhost:8080.
project structure
- counter
- app.js
- Counter.view
- index.html
- store.js
Project effect
The project is actually very simple, that is, you can add numbers by clicking the plus sign, and then you can detect whether the number is odd or even. For the last two buttons, the sub-stroke is to add 1 if it is an odd number, and the other one is to increase the number asynchronously.
guess the general idea
Before you start reading the code, you might as well speculate boldly on the idea of the implementation. Then compare the code and learn to improve.
This demo is about the code of vuex. So it goes without saying that it must be realized by vuex. Then the general idea of project realization should be to use a vuex state to record count, and then implement an increment method and decrement method in mutations. When the button is clicked, the value of count can be increased or decreased. Then we need an operation that can monitor whether the count is technical or even in real time. This can be achieved with getters. As for the two buttons on the back. The first one can be implemented by writing a method in mutations to judge and add, or by adding methods in actions. The last button is asynchronous and can only be implemented in actions. According to the project structure, it should not be difficult for us to guess that the code of vuex is recorded in store.js. Counter.vue implements the interface's data call to vuex.
Specific code implementation
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
count: 0
}
const mutations = {
increment (state) {
state.count++
},
decrement (state) {
state.count--
}
}
const actions = {
increment: ({
commit }) => commit('increment'),
decrement: ({
commit }) => commit('decrement'),
incrementIfOdd ({
commit, state }) {
if ((state.count + 1) % 2 === 0) {
commit('increment')
}
},
incrementAsync ({
commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('increment')
resolve()
}, 1000)
})
}
}
const getters = {
evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
}
export default new Vuex.Store({
state,
getters,
actions,
mutations
})
What is implemented in store.js is not much different from what I guess.
Note:
- If the code of vuex is written in a separate class and then introduced by other classes, we need to use
export defaultthe syntax to achieve it. - The code in the example encapsulates the mutations in actions.
<template>
<div id="app">
Clicked: {
{
$store.state.count }} times, count is {
{
evenOrOdd }}.
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="incrementIfOdd">Increment if odd</button>
<button @click="incrementAsync">Increment async</button>
</div>
</template>
<script>
import {
mapGetters, mapActions } from 'vuex'
export default {
computed: mapGetters([
'evenOrOdd'
]),
methods: mapActions([
'increment',
'decrement',
'incrementIfOdd',
'incrementAsync'
])
}
</script>
The call to vuex implemented in Counter.vue. We can learn how to simply introduce actions into the calling component. Use of mapGetters and mapActions.
Knowledge points learned
- If the code of vuex is written in a separate class and then introduced by other classes, we need to use
export defaultthe syntax to achieve it. - The code in the example encapsulates the mutations in actions.
- Use of mapGetters and mapActions.
demo is very simple. Get started first.