Vuex

Vuex：就是专门管理vue.js开发的状态管理模式，集中管理了组件的状态和数据，这样我们可以清楚的知道哪一个数据被改变。

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

Vue.use(Vuex) // Vuex 注册到 Vue 中

// 创建一个 store

const store = new Vuex.Store({
  // 初始化 state   
  state: {
    count: 0
  },
 // 改变状态唯一声明处
  mutations: {
    increment: state => state.count++,
    decrement: state => state.count--
  }
})

new Vue({
  el: '#app',
  // 从根组件将 store 的实例注入到所有的子组件  
  store,  
  computed: {
    count () {
        // Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态,
        // 每当状态 count 发生变化，都会重新求取计算
        return this.$store.state.count
    }
  },
  methods: {
    increment () {
      this.$store.commit('increment')
    },
    decrement () {
        this.$store.commit('decrement')
    }
  }
})

image.png