一:效果

二:详解vuex-state工作流程

vuex store对象的核心概念有State、Mutation、Getter、Action、Module五个；其实都是围绕数据和方法定义的几个核心规范模块；本节先了解一下state和mutation

1. 安装vuex

                                            
npm install --save vuex
                                            
                                        

2. 引入vuex

                                            
import vuex from 'vuex'
                                            
                                        

3. 注册VueRouter

                                            
Vue.use(vuex);
                                            
                                        

4. 实例化vuex store对象;定义store对象，有一个对象参数，而该对象就可以包含我们需要用到的五个核心模块

                                            
//这里先来认识state(状态)和mutation(突变)模块
const store = new Vuex.Store({
  state: {
    count: 2
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})     
                                            
                                        

5. 在根对象注入store

                                            
new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<app />'
})
                                            
                                        

6. 如何使用这个"全局对象"store呢

                                            
//通过一下方式可以在整个应用程序的所有组件中，都可以拿到count的值，this即上面New的vue对象                            
this.$store.state.count
                                            
                                        

我们在child1组件中可以拿到值

                                            
<template>
    <div>
        <h1>{{title}}</h1>
        <h2>{{count()}}</h2>
    </div>
</template>
<script>
export default{
    name:'child1',
    data(){
        return{
            title:'子组件1'
        }
    }, 
    methods:{
         count(){
          return this.$store.state.count +20  
        }
    }
}
</script>
                                            
                                        

三: 认识Mutation(突变)

Mutation是一个对象，里面可以定义更改state的各种方法；要更改state值，必须通过注册Mutation里面的方法；通过对Mutation的学习就可以理解vuex上面的两个特点了

1. 定义Mutations对象，添加一个increment方法，参数默认是state对象；主体是让state里面的count值加1

                                            
mutations: {
    increment (state) {
      state.count++
    }
  }
                                            
                                        

只能通过上面突变函数改变state;不可能像普通对象一样赋值去改变state；如

                                            
//行不通
this.$store.state.count=10；
                                            
                                        

2. 注册Mutation中的函数；这里其实就是调用函数嘛；无非在vuex中必须通过commit(increment)的方式调用

                                            
//调用一次 值加1
store.commit('increment');   //count=3
                                            
                                        

3. 同样只要是store对象中的方法，在所有组件中就可以调用 定义一个click函数，里面注册Mutation的increment(),改变store中的count值

                                            
<template>
    <div>
        <h1>{{title}}</h1>
        <h2>{{count()}}</h2>
         <Button @click="change">改变count</Button>
    </div>
</template>
<script>
export default{
    name:'child1',
    data(){
        return{
            title:'子组件1'
        }
    }, 
    methods:{
         count(){
          return this.$store.state.count +20  
        },
         change(){
          this.$store.commit('increment');
        }
    }
}
</script>