vuex 1.0 vue1的版本
vuex 是对vue中的数据源状态进行管理的框架
vuex的图解
image
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的函数
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。
网友评论