Vue笔记:Vuex

Posted Qimz

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue笔记:Vuex相关的知识,希望对你有一定的参考价值。

Vuex—集中式状态管理模式

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

以上是 Vuex 官方文档给出的定义,抓一下关键词我们不妨称之为集中式的状态管理模式。它实际上就是将组件间的共享状态抽取出来,以一个全局单例模式进行状态管理,下面我们用官方文档上的例子来对比一下两者的使用。

1. 常用的组件状态共享

在下面的 Vue 计数应用中,我们常用以下方式进行状态管理。

  • state:定义组件初始数据
  • view:根据状态变化更新视图
  • actions:响应用户操作产生的状态变化
new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: 
    `<div>{{ count }}</div>`,
  // actions 
  methods: {
    inc () {
      this.count++
    },
    dec () {
      this.count--
    }
  }
})

每个组件内拥有自己的数据和逻辑,很好的实现了组件化化便于管理。但这种方式有极大的弊端,组件的个数或者嵌套层级越多时,他们之间的状态管理就变得十分复杂。比如兄弟组件间同步状态需要使用 event bus,父子间组件间需要 props 属性和 emit 触发事件来达到目的。

2. 集中式状态管理

为了解决上述问题,我们可以采用 Vuex

  • state:全局唯一数据源,包含全部的应用状态。集中存储了组件所需要的数据以进行全局的统一状态管理。
  • mutations:状态变更方法。提交 mutations 是更改 state 的唯一方法。
  • commit:提交 mutations 的唯一方法。
  • actions:负责响应用户操作,主要是异步操作。
  • dispatch:执行 actions 的唯一方法。
  • getters:类似于计算属性 computed,可响应式获取 state 对象。

Vue 组件接收交互行为,调用 dispatch 方法触发 action 相关处理,若页面状态需要改变,则调用 commit 方法提交 mutation 修改state,通过 getters 获取到state新值,重新渲染 Vue Components,界面随之更新。

new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    inc: state => state.count++,
    dec: state => state.count--
  }
})
new Vue({
  el: '#app',
  computed: {
    count () {
      return store.state.count
    }
  },
  methods: {
    inc () {
      store.commit('inc')
    },
    dec () {
      store.commit('dec')
    }
  }
})

Vuex 将所有的状态集中管理,使得应用的数据流动和状态变化十分清晰,简化组件间的状态同步与修改。

总结

对于 Vuex 的适用场景,我认为要取决于组件间通信的复杂程度。如果较为复杂则要使用 Vuex 来简化操作增加程序的可维护性。

以上是关于Vue笔记:Vuex的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段13——Vue的状态大管家

VSCode自定义代码片段13——Vue的状态大管家

VSCode自定义代码片段13——Vue的状态大管家

vuex实践之路——笔记本应用

vuex笔记

vuex 学习笔记