vuex相关知识点

vuex简单理解转载博客

vuex从入门到入门
------state:从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态
------Getters:可以很容易地在任何组件中使用它
------mutation ：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
重要的原则就是要记住 mutation 必须是同步函数

定义：const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 变更状态
state.count++
}
}
})

调用：store.commit('increment')

使用常量替代 Mutation 事件类型

------Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
例子：const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
es5结构写法：
actions: {
increment ({ commit }) {
commit('increment')
}
}

分发 Action
store.dispatch('increment')

你需要明白 store.dispatch 可以处理被触发的action的回调函数返回的Promise，
并且store.dispatch仍旧返回Promise

uex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：

应用层级的状态应该集中到单个 store 对象中。

提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。

异步逻辑都应该封装到 action 里面。

vue的组件触发流程

1. search.js中触发一个methodA

2. methodA触发(getter --> Actions methodA)

3. methodA 通过vuex.actions里 Actions store.dispatch(types.METHODA)

4. vuex.modules.search配置的mutations[types.METHODA] 进行state的操作

5. state改变某个状态A 响应到search.js中属性a (getter --> a = search.A)

6. --------------vuex更新数据流程：

   

   • dispatch可以是view视图中触发，也可以是程序业务逻辑来触发
   • actions通过commit方法发出一个改变事件。commit以是view视图中触发，也可以是程序业务逻辑来触发，也可以在actions中触发
   • mutations中具体操作state的改变
   • state的改变通过getter暴露给view，state改变后会立即通知用getter关联起来的view。
   • 创建一个Vuex.Store的实例，用于Vue实例。