Part 1: Introduction to Vuex

Vuex promotion




Homemade vuex LOGO

The first two chapters explained the basic usage methods of Vuex, but it is certainly not reasonable to write in the actual project. If there are too many components, it is impossible to put all the data of the components into a store.js, so we need to organize Vuex in a modular way. First, let’s look at the project structure.




The project structure

First, run the following command:

vue init webpack-simple vuex-demo

cd vuex-demo

npm install

npm install vuex -S

npm run dev

2. Create a file directory as shown in the preceding figure



Vuex Modular directory

3. Write documents

Let’s stick with the examples from the last two articles. Let’s start with a function of individual files

Types. Js define constants, the use of constant replacement mutation events type user. Js in writing the user components used in the state, getters, actions, and mutations, Getters. Js to get the property getters. Js to get the property Actions, which is the action to be performed. For example, the process judgment, asynchronous request index.js is used to assemble actions. Js, getters. Js, user.js, and then unified export

1. Import and register the index.js file in main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store/index.js'

new Vue({
  store,
  el: '#app',
  render: h => h(App)
})
Copy the code
2. Define constants in types.js and export them, all caps by default
// Define type constants, default all caps const INCREMENT ='INCREMENT'
const DECREMENT = 'DECREMENT'

export default {
    INCREMENT,
    DECREMENT
}
Copy the code

Note: Keeping these constants in a separate file allows your code collaborators to see mutations throughout your app. Whether or not you use constants is up to you — this can be very helpful on large projects that require multiple people to work together. But if you don’t like it, you don’t have to.

3. Write state, getters, Actions and mutations used in the user component in user.js
// Import types. Js file import types from". /.. /types"; Const state ={count:5} var getters ={count(state){returnstate.count } } const actions ={ increment({ commit, Open mutations; open mutations; open mutations; open mutations; open mutations; open mutations;'increment'), except that retirement ({commit,state}){commit(types.increment)}if(state.count>10) {// The events submitted here and types.DECREMENT in mutations below correspond to commit(types.DECREMENT)}}} const mutations ={// Commit (types.increment) [types.increment](state){state.count++} [types.DECREMENT](state){state.count--}} // This event is a commit(typ.decrement) [typ.decrement](state){state.count--}} from actions aboveexport default {
    state,
    getters,
    actions,
    mutations
}
Copy the code

Note: The notation of [types.INCREMENT] in the mutations above, because types.INCREMENT is an object, it cannot be directly written as a function name. Can be used normally, originally written as:

const mutations ={ increment(state){ state.count ++; }}Copy the code
4. Getters. Js write the original method to determine odd and even numbers
// Since the data is retrieved from user.js, we need to import the file import user from'./modules/user'Const getters = {isEvenOrOdd(state){// Note that the data is retrieved from user.js, so write user.state.countreturn user.state.count % 2 == 0 ? "Even" : "Odd"}} // exportexport default getters;
Copy the code
5. Write the original asynchronous operation in actions.js
// If the asynchronous operation uses increment, import types from from the types.js file'./types'Const actions= {incrementAsync({commit, state}) {var p = new Promise((resolve, reject) => {setTimeout(() => {
                resolve()
            }, 3000);
        });
        p.then(() => {
            commit(types.INCREMENT);
        }).catch(() => {
            console.log('Asynchronous operation'); })}} // Finally exportexport default actions;
Copy the code
6. Assemble actions. Js, getters. Js and user.js in index.js and export them all
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import getters from './getters'
import actions from './actions'
import users from './modules/user'// Export the store objectexport default new Vuex.Store({
    getters,
    actions,
    modules:{
        users
    }
})
Copy the code

Note: When exporting the Store object, since getters and Actions have default in the core concept of Vuex, they can be written directly. But users is not the default, so use modules objects in VUex to export




The core concept

7. The vue. app file will not be modified
<template>
  <div id="app">
    <button @click="increment"</button> < button@click ="decrement"</button> < button@click ="incrementAsync"> increased latency < / button > < p > {{count}} < / p > < p > {{isEvenOrOdd}} < / p > < / div > < / template > < script > import {mapGetters, mapActions } from"vuex";
export default {
  name: 'app'.data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  computed:mapGetters([
    'count'.'isEvenOrOdd'
  ]),
  methods:mapActions([
    'increment'.'decrement'.'incrementAsync'
  ])
}
</script>
Copy the code

Finally, the heart-stopping moment came to see if this thing I had been working on would actually run





Vuex modular.gif


For novices, it may be difficult to understand this process just by watching it once, but I still want to try it more personally. If you have any questions, please leave a message and thank you for watching!