In a Vue project, if the project is simple, the data transfer between parent and child components can be passed using props or $emit etc.

But if it is a large and medium-sized project, it is often necessary to transfer data between unrelated parallel components, and many data require multiple components to be recycled. At this time, using the above method will make the project code verbose, and is not conducive to the reuse of components, which improves the degree of coupling.

Vue’s state management tool Vuex perfectly solves this problem.

I looked at the official website of vuex, and I don’t think it is very easy to understand. Sometimes we just need to dynamically get data from a component (the official website is called “component level”: it is an independent control, and the scope of action is only within the component) and then I want to put it in a place called “application level” by the official website (it can be accessed and dynamically modified anywhere in the project. After the modification, vue will update your entire project). This is the reason why I first came to learn vue. I didn’t want to make a front-end data structure library. . .

Let’s take a look at my small example step by step

First install vuex. The company project has been migrated from vue1.0 to vue2.0 by me, download and install vue  

npm install vuex –save

Then create a new folder store at the same level as index.html, and create a new index.js file in the folder. This file is used to assemble the module and export the store file

[1. Get the data in the store]

import Vue from  ' vue ' 
import Vuex from  ' vuex '

// Tell vue to "use" vuex 
Vue.use(Vuex)

// Create an object to save the initial state when the application starts
 // The state that needs to be maintained 
const store = new Vuex.Store({
  state: {
    // Place the initial global initial value when the app is started 
    bankInf: { " name " : " I am the first data of vuex " , " id " : 100 , " bankName " : " Bank of China " }
  }
})
// Integrate the initial state and change function, we get the store we need
 //So far, this store can be connected to our application 
export default store

Register the store in the vue root file so that all components can use the data in the store

My project file structure:

Register store in the main.js file

import Vue from  ' vue ' 
import App from  ' ./App ' 
import router from  ' ./router ' 
import store from  ' ./../store/index '

/* eslint-disable no-new */ 
new Vue({
  el: ' #app ' ,
  router,
  store,
  template: ' <App/> ' ,
  components: {App}
})

This simple first step is complete. You can use the data in the store in any component. The method of use is also very simple, that is, use the calculated attribute to return the data in the store to a new attribute, and then you can use it in your template. Use this attribute value:

In any component:

export default {
  ...
  computed: {
    bankName() {
      return  this .$store.state.bankInf.bankName;
    }
  },
  ...
}

The bankName attribute can be used directly in the template, which is the Bank of China in the store

[Two, modify the state in the store in the component]

Add html template to any component

<div class = " bank " >
    <list-header :headerData= " bankName " ></list-header>
    04Bank Details Page
    <input name= "" v-model= " textValue " >
    <button type= " button " name= " Get data " @click= " newBankName " ></button>
</div>

Then submit the mutation in the component

export default {
  ...
  computed: {
    bankName() {
      return  this .$store.state.bankInf.bankName;
    }
  },
  methods: {
    newBankName: function() {
      this .$store.commit( ' newBankName ' , this .textValue)
    }
  }
 ...   
}

Add mutations to index.js in the store:

const store = new Vuex.Store({
  state: {
    // Place the initial global initial value when the app is started 
    bankInf: { " name " : " I am the first data of vuex " , " id " : 100 , " bankName " : " Bank of China " },
    count: 0
  },
  mutations: {
    newBankName(state,msg) {
      state.bankInf.bankName = msg;
    }
  }
})

In this way, you find that when you click the submit button, the page has displayed the data you modified, and all the data in the place where this component is reused has been updated by Vue;

If you find an error this.$store.commit is not a function during use, please open the configuration file package.json of your project and check the version of vuex you are using. I am using vuex2.0,

If you want to delete the old version of vuex and install the new version of vuex, please use

npm rm vuex –save

Then install the latest vuex

npm install vuex –save

You can solve this error, or check the vuex official website api to modify the statement submitted to the mutation