# Vuex和provide、inject在项目中使用取舍

# 1.1 vuex全局管理的不二选择

这里使用vuex官网的一句话描述:它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

通过官网简介我们提取一下主要关键点,集中式、管理组件状态、可预测的方式

作为SPA前端开发框架,Vue父子组件之间的传值通信使用Props、多个组件之间的计算属性、方法公用一个属性时,vuex是推荐采用的一种状态管理中心。

通过中心管理状态让数据在不同组件之间更有利于管理,数据流向、数据改变、数据计算都形成统一的管理,项目中状态管理相对其他方式来说更清晰。

# 1.2 provide、inject多层嵌套组件通信必备

  • provide:Object | () => Object
  • inject:Array | { [key: string]: string | Symbol | Object }

对于多个嵌套较深的组件来说一层一层通过Props和事$emit传值是一件极其痛苦的事情。

provide和inject数据变更不是响应式的,响应式的数据需要return一个一个响应式的数据。

# 1.3 项目中关于vuex和provide、inject的取舍

  • 关注点: vuex的关注点从整个项目出发,不关注组件之间的嵌套关系,对项目中全局的状态做廷统一管理,provied和inject更关注基础组件之间的传值通信。
  • 响应式:vuex的state,getter都是响应式数据,provide提供的数据可以是响应式也可以不是响应式。
  • 可预测:vuex中mutation负责更改state,通过提交mutation的事件可预测性知晓数据的变化,provide中的数据变更不易被预测,绑定的数据如果是响应式数据,数组,对象的变化不会被监听到。
  • 命名空间:vuex中支持module模式,各个module之间可使用命名空间保持数据隔离,provide中不提供命名空间。
    创建人:yinyanting