Vue.js's vuex (state management)

This time I will bring you the vuex (state management) of Vue.js, using the vuex (state management) of Vue.jsWhat are the precautions?The following is a practical case, let's take a look.

vuex is a state management tool, similar to redux.

Install vuex

npm install vuex --save

Vuex’s state management storage is the response Formula: When your component uses a certain state of Vuex, once it changes, all associated components will automatically update the corresponding data.

The state of Vuex cannot be modified directly: the only way to modify the state of Vuex is to submit mutations to achieve the modification

As shown above, Vuex has established a complete ecosystem for Vue Components, including API calls during development. Around this ecosystem, let’s briefly introduce the main functions of each module in the core process:

Vue Components: Vue components. On the HTML page, it is responsible for receiving user operations and other interactive behaviors, and executing the dispatch method to trigger the corresponding action to respond.

dispatch: The operation behavior triggering method is the only method that can execute the action.

actions: Operation behavior processing module. Responsible for handling all interactions received by Vue Components. Contains synchronous/asynchronous operations, supports multiple methods with the same name, and triggers them in the order of registration. Requests to the backend API are performed in this module, including triggering other actions and submitting mutations. This module provides a Promise encapsulation to support action chain triggering.

commit: Status change submission operation method. Submitting a mutation is the only way to execute a mutation.

mutations: state change operation method. This is the only recommended method for modifying state in Vuex. Other modification methods will report an error in strict mode. This method can only perform synchronous operations, and the method name can only be globally unique. Some hooks will be exposed during the operation for state monitoring, etc.

state: Page state management container object. Centrally stores scattered data of data objects in Vue components, globally unique, for unified state management. The data required for page display is read from this object, and Vue's fine-grained data response mechanism is used for efficient status updates.

getters: state object reading method. This module is not listed separately in the figure. It should be included in render. Vue Components reads the global state object through this method.

The code in the main.js file is as follows

import Vue from 'vue'import App from './App.vue'import 'jquery'import VRouter from 'vue-router'//导入vueximport Vuex from 'vuex'import Apple from './components/apple.vue'import Banana from './components/banana.vue'// 全局使用路由Vue.use(VRouter)// 设置全局Vue.use(Vuex)// 实例化Vuexlet store = new Vuex.Store({  state: {    totalPrice: 0
  },  getters: {
    getTotal (state) {      return state.totalPrice
    }
  },  mutations: {
    increment (state, price) {
      state.totalPrice += price
    },
    decrement (state, price) {
      state.totalPrice -= price
    }
  },  // actions是在mutations之前的动作,只能调用mutations,不能调用state
  // 其实actions也可以理解为中介
  // actions 和  mutations的区别:
  // actions: 是异步的操作,再去触发mutations
  // mutations: 是同步的操作
  actions: {
    increase (context, price) {
      context.commit('increment', price)
    }
  }
})// 实例化routerlet router = new VRouter({
......
})/* eslint-disable no-new */new Vue({  el: '#app',
  router,
  store,//设置全局
  template: &#39;<App/>&#39;,  components: { App }
})

The code in apple.vue is as follows:

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <button @click="addOne">add one</button>
    <button @click="minusOne">minus one</button>
  </div></template><script>
  export default {
    data () {      return {        msg: &#39;I am apple&#39;,        price: 5
      }
    },    methods: {
      addOne () {        //使用了vuex的actions
        this.$store.dispatch(&#39;increase&#39;, this.price)
      },
      minusOne () {        //未使用vuex的actions
        this.$store.commit(&#39;decrement&#39;, this.price)
      }
    }
  }</script>

In banana.vue The code is as follows:

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <button @click="addOne">add one</button>
    <button @click="minusOne">minus one</button>
  </div></template><script>
  export default {
    data () {      return {        msg: &#39;I am banana&#39;,        price: 15
      }
    },    methods: {
      addOne () {        //未使用vuex的actions
        this.$store.commit(&#39;increment&#39;, this.price)
      },
      minusOne () {        //未使用vuex的actions
        this.$store.commit(&#39;decrement&#39;, this.price)
      }
    }
  }</script>

In the App.vue file of the display interface

<template>
  <div id="app">
    ![](./assets/logo.png)
    {{ totalPrice }}    <apple></apple>
    <banana></banana>
  </div></template><script>
  import Apple from &#39;./components/apple.vue&#39;
  import Banana from &#39;./components/banana.vue&#39;
  export default {    components: {
      Apple,
      Banana
    },    //计算属性
    computed: {
      totalPrice () {//        return this.$store.state.totalPrice
        return this.$store.getters.getTotal
      }
    }
  }</script>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Other operations of Vue.js routing

Routing parameters of Vue.js

The above is the detailed content of Vue.js's vuex (state management). For more information, please follow other related articles on the PHP Chinese website!