Home > Web Front-end > JS Tutorial > body text

Detailed explanation of vuex2.0modules

小云云
Release: 2018-01-16 13:05:34
Original
2306 people have browsed it

This article mainly introduces the modules of vuex2.0. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor to take a look, I hope it can help everyone.

What is module?

Background: State in Vue uses a single state tree structure. All the states should be placed in the state. If the project is more complex, the state is a large object. The store object will also become very large and difficult to manage.

module: Each module can have its own state, mutation, action, and getters, making the structure very clear and easy to manage.

How to use module?

General structure


const moduleA = {
 state: { ... },
 mutations: { ... },
 actions: { ... },
 getters: { ... }
 }
const moduleB = {
 state: { ... },
 mutations: { ... },
 actions: { ... }
 }

const store = new Vuex.Store({
 modules: {
  a: moduleA,
  b: moduleB})
Copy after login

Data inside the module: ①Internal state, the state inside the module is local, That is, the module is private, such as the list data in the car.js module state, which we need to obtain through this.$store.state.car.list; ② Internal getters, mutations, and actions are still registered in the global namespace. This This is so that multiple modules can respond to the same mutation at the same time; the result of this.$store.state.car.carGetter is undefined, which can be obtained through this.$store.state.carGetter.

Passing parameters: getters====({state(local state),getters(global getters object),roosState(root state)}); actions====({state(local State), commit, roosState (root state)}).

Create a new project to experience it, create a new project vuemodule through vue –cli, don’t forget to install vuex.

1, in the src directory Create a new login folder and create index.js in it to store the status of the login module. For the sake of simplicity, I put all the state, actions, mutations, and getters under the module in the index.js file.

First simply add a status to it, userName: “sam”


const state = {
  useName: "sam"
};
const mutations = {

};
const actions = {

};
const getters = {

};

// 不要忘记把state, mutations等暴露出去。
export default {
  state,
  mutations,
  actions,
  getters
}
Copy after login

2, in the src directory, create a new store.js This is The root store, which introduces the login module through the modules attribute.


import Vue from "vue";
import Vuex from "Vuex";

Vue.use(Vuex);

// 引入login 模块
import login from "./login"

export default new Vuex.Store({
  // 通过modules属性引入login 模块。
  modules: {
    login: login
  }
})
Copy after login

3, introduce store in main.js and inject it into the vue root instance.


import Vue from 'vue'
import App from './App.vue'

// 引入store
import store from "./store"

new Vue({
 el: '#app',
 store, // 注入到根实例中。
 render: h => h(App)
})
Copy after login

4. Obtain the state under login through the computed attribute in app.vue. Note here that in the absence of modules, the component passes this.$ The store.state.attribute name can be obtained, but after there are modules, the state is restricted to the login namespace (module), so the module name (namespace) must be added in front of the attribute name, and this.$store.state is passed in the component. .Module name.Attribute name, here is the status successfully obtained from this.$store.state.login.userName


<template>
 <p id="app">
  <img src="./assets/logo.png">
  <h1>{{useName}}</h1>
 </p>
</template>

<script>
export default {
 // computed属性,从store 中获取状态state,不要忘记login命名空间。
 computed: {
  useName: function() {
   return this.$store.state.login.useName
  }
 }
}
</script>
Copy after login

component. The project directory and display are as follows

4. Change the name through actions and mutations. This involves dispatch action, commit mutations, and mutations to change the state.

First Add changeName action and CHANGE_NAME mutations in the login folder index.js.


const mutations = {
  CHANGE_NAME (state, anotherName) {
    state.useName = anotherName;
  }
};

const actions = {
  changeName ({commit},anotherName) {
    commit("CHANGE_NAME", anotherName)
  }
};
Copy after login

Add a button in app.vue:

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template