zl程序教程

您现在的位置是:首页 >  其它

当前栏目

vuex的各个细节理解(因人而异)

理解 细节 各个 Vuex
2023-09-27 14:26:17 时间

应用级的状态集中放在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元素!就不需要