Vue Crawl pit Road (iv)-First contact with Vuex

In Vue.js projects, if the project structure is simple, the data transfer between parent and child components can be used props or $emit http://www.cnblogs.com/wisewrong/p/6266038.html

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, where only one state is stored author

Although Vue and Vuex have been introduced in Main.js, there is a need to introduce

Third, 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 to pass the value of the input box to the author in Store.js

Here I used the Element-ui as a 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

Then modify the Setauthor method in the Header.vue

Here $store. Commit commits the Newauthor and passes this.inputtxt to MSG, thereby modifying 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.