Vue Advanced (v): First contact with Vuex

Vue Advanced (v): First contact with Vuex

In the Vue.js project, if the project structure is simple, data transfer between parent and child components can be used in the form of props or $emit (see the "Vue Advanced (vi): Data transfer between components"). However, if you are a large project, it is often necessary to pass data between subcomponents, and it is not convenient to use the previous method. Vue's state management tool Vuex perfectly solves this problem. First, install and introduce Vuex

Project structure:

First use NPM to install Vuex

CNPM Install Vuex-s

And then introduce it in the main.js.

Import vue from ' Vue '
import App from './app '
import Vuex from ' Vuex ' to '
import store from './vuex/store '

vue . Use (VUEX)/

* eslint-disable no-new */
new Vue ({
  el: ' #app ',
  store,
  render:h + H (APP)
} )

second, build the core warehouse Store.js

The state of the VUEX application should be stored in the Store.js, the Vue component can get the state from the Store.js, and the store can be understood as a global variable warehouse.
However, there are some differences with simple global variables, mainly reflected in the store when the state changes, the corresponding Vue components will be updated efficiently.
Create a Vuex directory under the SRC directory and place the store.js in the Vuex directory

Import vue from ' Vue '
import Vuex from ' Vuex '

vue.use (VUEX)

Const STORE = new Vuex.store ({
  //define State
  St Ate: {
    author: ' Wise wrong '
  }
})

export default Store

This is one of the simplest store.js, which only holds a state author.
Although Vue and Vuex have been introduced in Main.js, there is a need to introduce a third, to map the state to the component

<template>
  <footer class= "Footer" >
    <ul>
      <li v-for= "Lis in ul" >{{lis.li}}</ li>
    </ul>
    <p>
      copyright&nbsp;&copy;&nbsp;{ {Author}} -All rights reserved
    </p>
  </footer>
</template>

<script>
  Export  Default {
    name: ' Footerdiv ',
    data () {
      return {
        ul: [
          {li: ' Gold of Glass '},
          {li: ' Dim sen '},
          { Li: ' ethereal '},
          {li: ' The Fire of Escape '},
          {li: ' Shining Sand '}]}
    ,
    computed: {
      author () {
        retur n this. $store. State.author
      }
    }
</script>

This is the HTML and Script section of Footer.vue .
Mainly in computed, the value of this. $store. State.author is returned to the author in the HTML. After the page is rendered, you can get the value of the author.
Iv. Modifying the state in the component

Then add an input box to the Header.vue and pass the value of the input box to author in Store.js, where element-ui is used as the style frame.

The above binds the value of input box inputs to inputtxt and then bindings the Click event on the button buttons at the back, triggering the Setauthor method

Methods: {
setauthor:function () {this
. $store. State.author = This.inputxt
}
}

In the Setauthor method, the value of the input box is inputtxt assigned to the state author in Vuex, enabling data transfer between subcomponents.
v. Official recommended ways to modify the state

The above example modifies the state author using the Setauthor directly, but Vue officially recommends the following method:

First, a method newauthor is defined in Store.js, where the first parameter state is the $store. State, the second parameter msg needs to be passed in separately, and then modifies the Setauthor method in Header.vue.

Here $store. Commit commits the Newauthor and passes this.inputtxt to msg to modify the author.
This explicit commit (commit) mutations allows us to better track the changes in each state, so the second approach is more recommended in large projects.