vuex的简单使用

使用vue-cli搭建框架
1.vuex的状态存储是响应式的，当vue组件从store中读取状态的时候，若store中的状态发生变化，那么响应的组件也会相应的得到高效更新
2.不能直接改变store中的状态，显示地提交(commit) mutation，方便地追踪每一个状态的变化

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {

  }
})

<template>
  <div>
    <div>数量：{{count}}</div>
    <el-button @click="submit">提交</el-button>
  </div>
</template>
<script>
export default {
  data() {
  },
  computed: {
   //从store实例中读取状态
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    submit() {
      //提交
      this.$store.commit('increment')
      console.log(this.count)
    }
};
</script>