Vuex核心store仓库

每个Vuex应用的核心是store仓库
store是个容器包含着应用状态state
Vuex 和单纯的全局对象两点不同
Vuex 状态存储响应式,Vue组件从store读取状态时 若store状态发生变化,相应组件也会相应高效更新
改变store状态的唯一途径是显式提交(commit) mutation //转变改变
方便跟踪状态变化 帮助了解应用
#
最简单的 Store
创建 store创建
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 获取状态对象,通过 store.commit 触发状态变更
store.commit('increment')
console.log(store.state.count) // -> 1
为了在 Vue 组件中访问 this.$store property
需要为 Vue 实例提供创建好的 store
Vuex 提供从根组件向所有子组件 以 store 选项的方式 注入该 store 的机制
new Vue({
  el: '#app',
  store: store,
})
也可以 ES6 对象的 property 简写 (用在对象某个 property 的 key 和被传入的变量同名时):
new Vue({
  el: '#app',
  store
})
现在可从组件的方法提交变更
methods: {
  increment() {
    this.$store.commit('increment')
    console.log(this.$store.state.count)
  }
}
通过提交 mutation 而非直接改变 store.state.count
想要明确追踪状态变化,这是约定能够让意图明显,阅读代码时容易解读应用的状态改变。
实现能记录每次状态改变,保存状态快照的调试工具
store状态是响应式的,组件中调用 store 中的状态简单到仅需要在计算属性中返回即可
触发变化也仅是在组件的 methods 中提交 mutation
//vuex.vuejs.org/zh/guide/

核心概念
State
Getters
Mutations
Actions
Modules