利用vue计数来简单理解vuex

vuex专为vue.js应用程序开发的状态管理模式
使用vue-cli创建项目时选择vuex组件，会帮忙生成store.js这个文件

import Vue from 'vue'
import Vuex from 'vuex'  //引入vuex

Vue.use(Vuex)  //在vue这个对象上绑定Vuex

export default new Vuex.Store({
  state: {   
  },
  mutations: {    
  },
  actions: {
  },
  modules: {
  }
})
//在Vuex.store这个方法里面传入一个对象，有4个属性  state：在这里对组件状态进行集中管理，mutations：是改变vuex状态的方法集，方法都是放在这个里面

例如我们在info这个组件传递一个状态（count）给about组件，info和about是兄弟组件

//store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0  //定义一个状态count
  },
  mutations: {
  	//定义一个方法，让count+1
    increse () {  
      this.state.count++
      console.log(this.state.count)
    }
  },
  actions: {
  },
  modules: {
  }
})

在页面上使用vuex

//info.vue
<template>
  <div>
    <input type="button" id="btn" @click="handleClick" value="点我"  />
  </div>
</template>

<script>
import store from '../store/index'  //引入vuex
export default {
  name: 'Info',
  store,  //引入
  data () {
    return {
    }
  },
  methods: {
    handleClick () {
      store.commit('increse')  //使用store.commit关键词 commit('方法名')
    }
  }
}
</script>

怎么把这个值传给about.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>{{msg}}</p>
  </div>
</template>

<script>
import store from '../store/index'  //引入vuex
export default {
  name: 'About',
  store, //引入store
  data () {
    return {
      msg: store.state.count  //调用vuex中count状态值，并把此值给msg
    }
  }
}
</script>

利用 store.state.count 获取对象
使用 store.commit 触发状态的变更