Vuex advanced Modular Organization details, vuex Modular

Vuex advanced Modular Organization details, vuex Modular

Previous Article: getting started with Vuex

Previous Article: Vuex upgrade

Self-made vuex LOGO

The first two articles explain the basic usage of Vuex, but in actual projects, writing is definitely unreasonable. If there are too many components, it is impossible to put all the component data into a store. in js, We need to modularize the Organization Vuex. First, let's take a look at the project structure.

 

Project Structure

1. First, run the following command:

vue init webpack-simple vuex-democd vuex-demonpm installnpm install vuex -Snpm run dev

2. Create a file directory according to the structure

Vuex modular directory

3. Compile a file

We will extend the examples in the previous two articles. First, let's talk about the role of each file.

Define constants in types. js and replace the mutation event type with constants.

Write the state, getters, actions, and mutations used in the user component in user. js, and export them in a unified manner (similar to store. js in the previous example)

Getters. js writes the original getters to get attributes.

The original actions written in actions. js is the action to be executed, such as process judgment and asynchronous requests.

Index. js is used to assemble actions. js, getters. js, and user. js, and then export them in a unified manner.

1. Import the index. js file in main. js and register it

import Vue from 'vue'import App from './App.vue'import store from './store/index.js'new Vue({ store, el: '#app', render: h => h(App)})

2. Define constants in types. js and export them. By default, all constants are capitalized.

// Define a type constant. By default, all the uppercase const INCREMENT = 'credentials' const DECREMENT = 'credentials' export default {INCREMENT, DECREMENT}

Note: Put these constants in a separate file, so that your code cooperator can clearly understand the mutation contained in the entire app. Using constants doesn't depend on you-this can be helpful in large projects that require collaboration by multiple people. But if you don't like it, you don't have.

3. Write the 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} // defines gettersvar getters = {count (state) {return state. count }} const actions = {increment ({commit, state}) {// events submitted here and types in mutations below. the INCREMENT corresponds to the principle of the original commit ('credentials'), but the type name is changed to the constant commit (types. INCREMENT)}, decrement ({commit, state}) {if (state. count> 10) {// events submitted here and types in mutations below. the DECREMENT corresponds to commit (types. DECREMENT) }}const mutations = {// The event here is commit (types. INCREMENT) [types. INCREMENT] (state) {state. count ++}, // The event here is commit (types. DECREMENT) [types. DECREMENT] (state) {state. count --} // Finally, export the export default {state, getters, actions, mutations} in a unified manner}

Note: [types. INCREMENT], because types. INCREMENT is an object, so it cannot be written directly as a function name. You need to use a constant as the function name using the ES2015 style computing attribute naming function. The original syntax is as follows:

const mutations ={  increment(state){    state.count ++;  }}

4. Write the original method for determining the parity in getters. js.

// Because the data is from the user.. js, so you need to import the file 'import user from '. /modules/user 'const getters = {isEvenOrOdd (state) {// note that the data is from user. js, so it is written as user. state. count return user. state. count % 2 = 0? "Even": "odd" }}// export the export default getters;

5. Write the original Asynchronous Operation in actions. js

// The increment method is required for asynchronous operations, so you need to import types. js File import types from '. /types 'const actions = {incrementAsync ({commit, state}) {// Asynchronous Operation var p = new Promise (resolve, reject) =>{ setTimeout (() =={ resolve ()}, 3000) ;}); p. then () => {commit (types. INCREMENT );}). catch () => {console. log ('asynchronous operation') ;}}// finally export the export default actions;

6. Assemble actions. js, getters. js, and user. js in index. js, and then export them in a unified manner.

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 object export default new Vuex. store ({getters, actions, modules: {users }})

Note: When exporting store objects, getters and actions can be written directly because they are default in vuex's core concepts. However, users is not the default value. Therefore, the modules object in vuex is used for export.

Core concepts

7. The Vue. app file is not modified.

<Template> <div id = "app"> <button @ click = "increment"> Add </button> <button @ click = "decrement"> reduce </button> <button @ click = "incrementAsync"> increased latency </button> <p >{{ count }}</p> <p >{{ isEvenOrOdd }</p> </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 (['credentials', 'credentials', 'initmentasync'])} </script>

Finally, the thrilling time is up. Can I run this exciting thing?

Vuex .gif

For new users, it may be difficult to understand this process only once, but they still need to give it a try. The above is all the content of this article. I hope it will help you learn it, we also hope that you can support the customer's home.