Original text: https://www.cnblogs.com/ghostwu/p/7521097.html

Before that, I have shared the communication mechanism between components and between parent and child components, and our vuex is to solve the problem of component communication.

What is vuex?

The essence of component communication is to transfer data or component state between components (data and state are collectively referred to as state here), but we can see that if we communicate in the most basic way, once there are more states to be managed, the code will become very bulky and huge. The management of all States will be inadequate. Therefore, vuex appears. It helps us to extract all the public states from the container of vuex and manage them according to certain rules. Let's use vuex as soon as possible. To master the usage of vuex, you should master the communication between components. If you don't understand it, please refer to the following two articles:

Vue 2.0 based on vue-cli + web pack parent-child component communication tutorial

Vue 2.0 is a communication tutorial based on vue-cli+webpack peer components

Setting up the environment begins:

On the git command line, execute the following commands to complete the environment setup:

1, npm install --global vue-cli install Vue command line tool

2. vue init webpack vue-demo uses Vue command to generate a webpack project named vue-demo

3. cd vue-demo entry project

4. npm install installs all dependency packages in package.json

5, npm run dev run project

Then delete the default Hello.vue component and organize App.vue as follows

<template>
  <div id="app">
  //This is an empty app.
  </div>
</template>

<script>
  export default {
    name : 'app'
  }
</script>

Modify the index.js file below router as follows:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
    }
  ]
})

After the basic environment has been built, vuex is installed.

Installation command: npm install vuex --save-dev

1. After the installation is complete, introduce it into main.js and register the store: so that we can get the container through this.$store

main.js code:

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './vuex/store'

Vue.use(Vuex)

Vue.config.productionTip = false

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

2. Create a vuex directory under the src directory, and then create a store.js under the vuex directory to store all the States (changed data)

store.js code:

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    userName : 'ghostwu'
  }
})

export default store

Store a state userName in state

3. Rendering data in state into components

Under components, create a new component Main.vue with the following code:

<template>
    <div>
        <h3>{{myName}}</h3>
    </div>
</template>
<script>
    export default {
        name : "Main",
        computed : {
            myName (){
                return this.$store.state.userName;
            }
        }
    }
</script>

Get the state value stored in the global container store by a computed attribute

4. Introducing the component Main.vue into App.vue

App.vue code:

<template>
  <div id="app">
    <Mainc></Mainc>
  </div>
</template>

<script>
import Mainc from './components/Main.vue';
export default {
  name: 'app',
  components : {
    Mainc
  }
}
</script>

At this point, you can see that the value of userName of the state in the store container is read out on the page. If you change the value of userName, the page will also change.

Fifth, we change the state through some interactions to see if the component receives the value of state

Create a new Header.vue component under the components component. The code is as follows:

<template>
    <div>
        <input type="text" v-model="msg" />
        <input type="button" v-on:click="setName" value="Point me" />
    </div>
</template>
<script>
    export default {
        name : 'Header',
        data(){
            return {
                msg : ''
            }
        },
        methods : {
            setName(){
                this.$store.state.userName = this.msg;
            }
        }
    }
</script>

App.vue introduces component Header

The App.vue code is as follows:

<template>
  <div id="app">
    <Headerc></Headerc>
    <Mainc></Mainc>
  </div>
</template>

<script>
import Headerc from './components/Header.vue';
import Mainc from './components/Main.vue';
export default {
  name: 'app',
  components : {
    Headerc,
    Mainc
  }
}
</script>

When I click the button, I change the value of useName in the state, and the value of state.userName in the Main component will be updated. This change is easy to understand. Next, let's look at the state change recommended by vuex.

VI. The State Change Method Recommended by vuex

Create a new mutations in store.js to store the modified state

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    userName : 'ghostwu'
  },
  mutations : {
    showUserName( state, msg ){
      state.userName = msg;
    }
  }
})

export default store

The first parameter, state, is $store.state. The second parameter, msg, needs to be passed in separately. This parameter is passed through the method in the click event of Header.vue.

Header.vue code:

<template>
    <div>
        <input type="text" v-model="msg" />
        <input type="button" v-on:click="setName" value="Point me" />
    </div>
</template>
<script>
    export default {
        name : 'Header',
        data(){
            return {
                msg : ''
            }
        },
        methods : {
            setName(){
                this.$store.commit( 'showUserName', this.msg );
            }
        }
    }
</script>

store.commit submits the value of this.msg to showUserName. State receives the changed state, which is the most basic usage and function of vuex