脚本宝典收集整理的这篇文章主要介绍了Vue.js数据状态管理-Vuex，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

Vue.js数据状态管理-Vuex

[TOC]

上次分享回顾

父子组件的通信

• 父 -> 子： PRops

• 子 -> 父： 自定义event

• 组件文档化

Vuex起步

Vuex主要应用于中、大型单页应用的数据状态管理架构。

为什么要数据状态管理？

• 组件数据共享

组件之间如何数据共享（组件通信）

• 父 -> 子：props

• 子 -> 父：自定义event

• 兄弟之间？其他非父子? ：自定义event？

可能的解法

1. 自定义event

   VAR bus = new Vue()
   // in component A's method
   bus.$emIT('id-selected', 1)
   
   // in component B's created hook
   
   bus.$on('id-selected', function(id){
     //...
   })

2. 共享数据源

   const srcData = {
     count: 0
   }
   
   const vmA = new Vue({
     data: srcData
   })
   
   const vmB = new Vue({
     data: srcData
   })

存在的问题

• 谁在emit事件？谁在on事件？父组件和子组件强耦合

• 如何追踪数据的状态变化？

• 业务逻辑遍布各个组件，导致各种意想不到的问题

Vuex基本概念

• state

  • 状态的容器

• getters

  • 状态的获取函数

• mutations

  • 修改状态的事件回调函数

• actions

  • 分发修改状态的事件

const Store = new Vuex.Store({
  //state
  state: {
    count: 0
  },
  //mutations
  mutations: {
    INIT (state, data) {
      state.count = data.count
    },
    INCREASE (state) {
      state.count++
    },
    DECREASE (state) {
      state.count--
    }
  },
  //getters
  getters: {
    getCount (state) {
      return state.count
    }
  },
  //actions
  actions: {
    init(context){
      context.COMmit('INIT', {
        count: 10
      })
    },
    inc(context){
      context.commit('INCREASE')
    },
    dec(context){
      context.commit('DECREASE')
    }
  }
})

Vuex基本理解

• 数据的集合其中处理（DB）

• 数据的操作集中处理 （CRUD）

• 所有对数据的操作（CRUD）以请求（commit）的方式提交处理 （DAO）

脚本宝典总结

以上是脚本宝典为你收集整理的Vue.js数据状态管理-Vuex全部内容，希望文章能够帮你解决Vue.js数据状态管理-Vuex所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。