vuex的各个细节理解（因人而异）

应用级的状态集中放在store中；
改变状态的方式是提交mutations，这是个同步的事物；
异步逻辑应该封装在action中。

const vuex_store = new Vuex.store({
　　state:{
　　　　xxx:oooo; // 定义你的数据源
　　}
})

npm install vuex --save-dev
它必须以插件的方式进行引用：
import Vuex from 'vuex';
Vue.use(Vuex);

state，驱动应用的数据源；（vue实例化出来的状态）
view，以声明方式将state映射到视图；（视图 template呈现的模板）
actions，响应在view上的用户输入导致的状态变化。（methods的行为状态变化）

Vuex 允许我们在 store 中定义『getters』（可以认为是 store 的计算属性）。Getters 接受 state 作为其第一个参数：

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于事件：
每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。
这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法：
向 store.commit 传入额外的参数，即 mutation 的载荷（payload）在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读

提交 mutation 的另一种方式是直接使用包含 type 属性的对象：

store.commit({
　　type: 'increment',
　　amount: 10
})

当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数，因此 handler 保持不变：

mutations: {
　　increment (state, payload) {
　　　　state.count += payload.amount
　　}
}

最好提前在你的 store 中初始化好所有所需属性。

当需要在对象上添加新属性时，你应该

使用 Vue.set(obj, 'newProp', 123), 或者 -

以新对象替换老对象。例如，利用 stage-3 的对象展开运算符我们可以这样写：

state.obj = { ...state.obj, newProp: 123 }

（常用）
使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然：

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'
// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
　　state: { ... },
　　mutations: {
　　// 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
　　　　[SOME_MUTATION] (state) {
　　　　　　// mutate state
　　　　}
　　}
})

一条重要的原则就是要记住 mutation 必须是同步函数：

mutations: {
　　someMutation (state) {
　　　　api.callAsyncMethod(() => {
　　　　　　state.count++
　　　　})
　　}
}

你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

import { mapMutations } from 'vuex'

export default {
　　methods: {
　　　　...mapMutations([
　　　　　　'increment'---------------->映射 this.increment() 为 this.$store.commit('increment')
　　　　]),
　　　　...mapMutations({
　　　　　　add: 'increment'---------------->映射 this.add() 为 this.$store.commit('increment')
　　　　})
　　}
}

在 Vuex 中，mutation 都是同步事务：

store.commit('increment')
// 任何由 "increment" 导致的状态变更都应该在此刻完成。

Actions 支持同样的载荷方式和对象方式进行分发：

// 以载荷形式分发
store.dispatch('incrementAsync', {
　　amount: 10
})

// 以对象形式分发
store.dispatch({
　　type: 'incrementAsync',
　　amount: 10
})

对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。
模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState

如果希望你的模块更加自包含或提高可重用性，你可以通过添加 namespaced: true 的方式使其成为命名空间模块。
当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名

原生事件在router-link中加.native才能生效，而a标签就不用
意思就是当你给一个vue组件绑定事件时候，要加上native！如果是普通的html元素！就不需要

巴特西

vuex的各个细节理解（因人而异）

最新文章

热门文章