Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

Vuex和单纯的全局对象的不同：

• Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

• 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
//通过 store.state 来获取状态对象，
console.log(store.state.count);
//通过 store.commit 方法触发状态变更
store.commit('increment');

export default store;

state

单一状态树,一个对象就包含了全部的应用层级状态

在Vue组件中获得Vuex状态 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态(当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM)，若使用data只在开始时候获取一次

// 会报错，Property or method "store" is not defined on the instance
{{count}}
<button @click="store.commit('increment',1)">
  +1
</button>

computed:{
  count(){
    return store.state.count;
  }
}
// 解决措施1：使用 add 方法
<button @click="add"> +1</button>

add(){
  store.commit('increment','1');
}

// 解决措施2： 使用 $store
add(){
  this.$store.commit('increment','1');
}

<button @click="$store.commit('increment','1')"> +1</button>

Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)），子组件能通过 this.$store 访问。

mutations

mutations 里面的函数只能接受两个参数

// 第二个参数 使用 payload:{}
mutations:{
  setCurrentTag(state, id: string) {},
  updateTag(state, payload: { id: string, name: string }) {}
}