Vuex

2018-10-28  本文已影响0人  Cissy_fba3

多个视图依赖于同一状态,来自不同视图的行为需要变更同一状态
组件间传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。或者我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝,也非常麻烦。这时候我就需要:
vuex——组件间的数据共享。

每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:
1、Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
2、你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

store.commit('increment')
console.log(store.state.count)   // 1

state:Vuex 使用单一状态树,每个应用将仅仅包含一个 store 实例。
Vuex 通过 store 选项,提供了一种机制将状态从根组件“注入”到每一个子组件中.通过在根实例中注册 store 选项,该 store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store 访问到

getter:筛选state

mutation:更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
mutation 必须是同步函数
store.commit 可以传入额外的参数

mutations: {
  increment (state, n) {
    state.count += n
  }
}
store.commit('increment', 10)

action:
Action 类似于 mutation,不同在于:
Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。

上一篇下一篇

猜你喜欢

热点阅读