vuex1.0入门说明

vuex 1.0 vue1的版本
vuex 是对vue中的数据源状态进行管理的框架

vuex的图解

image

vuex就是一个全局对象统一管理数据方便页面和组件之间的数据传递

引用文档

vuex1.0 对应的文档

vuex1.0 中文文档

vuex2.0 对应的文档

vuex文档

vuex 最重要的一条 组件永远都不应该直接更改Vuex store的状态. store的状态必须通过mutation handler(变更句柄)中管理
Vuex 使用的是单一状态作用树用一个对象包含全部的应用层级状态. 每个应用将仅仅包含1个store实例和(EXTJS不同)
vuex 应用的核心就是 store (仓库) .store 本质就是一个容器包含中应用中的大部分状态(state) store的状态是全局容器.

store 全局仓储

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

你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地分发 状态变更事件(explicitly dispatching mutations)。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

最简单的 store

注意：我们将会在后续的文档中用 ES2015 语法进行案例展示。如果你还没能掌握 ES2015，你得抓紧了！本文同样假设你已经了解了 Vue 本体的官方文档中构建大型应用章节所涉及的概念.

创建 Vuex store 的过程相当直截了当 - 只要提供一个初始化的 state 对象，以及一些 mutations：

import Vuex from 'vuex'

const state = {
  count: 0
}

const mutations = {
  INCREMENT (state) {
    state.count++
  }
}

export default new Vuex.Store({
  state,
  mutations
})

现在，你可以通过 store.state 来读取 state 对象，还可以通过 dispatch 某 mutation 的名字来触发这些状态变更：

store.dispatch('INCREMENT')

console.log(store.state.count) // -> 1

如果你倾向于对象风格的分发方式，你可以用这种语法：

// 效果同上
store.dispatch({
  type: 'INCREMENT'
})

Mutations

import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    INCREMENT (state) {
      // 改变 state
      state.count++
    }
  }
})

用全部大写命名 mutation 是一个惯例，方便将它和 actions 区分开。

你不能直接调用 mutation handler. 这里传入 Store 构造函数的选项更像是在注册事件回调：『当 INCREMENT 事件被触发时，调用这个 handler』。触发 mutation handler 的方法是 dispatch 一个 mutation 的事件名：

store.dispatch('INCREMENT')

带参数的 dispatch

store.dispatch 可以接受额外的参数：

// ...
mutations: {
  INCREMENT (state, n) {
    state.count += n
  }
}

store.dispatch('INCREMENT', 10)

这里的 10 会紧跟着 state 作为第二个参数被传递到 mutation handler. 所有额外的参数被称为该 mutation 的 payload.

mutations 必须是同步函数
Actions 是用于分发mutations的函数

vuex1.0 Q&A

vuex1.0 demo

Vuex.Store 实例属性

state

type: Object

根 state，只读。

Vuex.Store 实例方法

dispatch(mutationName: String, ...args)

直接触发一个 mutation。在一些特殊情况下会需要用到这个方法，但通常来说，在组件中应当尽量通过调用 actions 来触发 mutation。

watch(pathOrGetter: String|Function, cb: Function, [options: Object])

监听一个 path 或 getter 的值，当值发生改变时触发回调。接受与 vm.$watch 方法相同的配置选项作为可选参数。
执行返回的 handle function 结束监听。

hotUpdate(newOptions: Object)

热更新 actions 和 mutations。

vuex1.0入门说明