当时还没使用vuex的时候,组件与组件化之间的通信简直就是噩梦---父传子(props),子传父($emit),兄弟之间传件(eventBus),某个组件有需要的时候,而可以解决这个需求又在很远的地方--就会显得特别麻烦。
我能不能把有需要的放在一起,不需要左递右给呢?像全局那样的思路,把东西都放在一个整体里面。
而vuex也正好可以解决这个问题----它是采用集中式管理组件依赖的共享数据的一个工具, 可以解决不同组件数据共享的问题
搭建:
接下来讲讲vuex的五大属性
state--存放数据的仓库
state是放置所有公共状态的属性,如果你有一个公共状态数据 , 你只需要定义在 state对象中即可
可以数组,对象,对象里面再嵌套
其中的严格模式strict是指在严格模式下,无论何时发生了状态变更且不是由 mutation 函数引起的,将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。
使用:
插值表达式
计算属性
如果都嫌麻烦的,还可以用vuex自带的辅助函数来帮我们写
然后我们直接用即可
mutation--操作数据的地方
state数据的修改只能通过mutations,并且mutations必须是同步更新,目的是形成数据快照
它的第一个参数是当前的store里面的state
使用:
直接写:
语法是
$store.commit('mutation里定义的方法',参数)
也可以在方法methods里面声明好然后使用
当然,他也同样有辅助函数
actions--异步操作
有同步,也肯定有异步,state是存放数据的,mutations是同步更新数据,所以有异步操作需要交给action--actions则负责进行异步操作
使用:
直接写:
语法:$store.dispatch('action里面定义的方法',传入的参数)
方法与mutation大同小异(辅助函数+方法里面定义)
getters--数据简化与过滤
除了state之外,有时我们还需要从state中派生出一些状态,这些状态是依赖state的,此时会用到getters
可以说是对state中存储的数据进行过滤操作
使用:
直接写即可
也可以在(辅助函数+计算属性里面定义)
modules--vuex模块化
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象 state 当中。当应用变得非常复杂时,就有可能变得相当臃肿。Vuex会变得越来越难以维护, 由此,又有了Vuex的模块化
如果以后的项目需要处理的文件多,东西杂,我们可以把它分成不同的文件夹来存放,方便以后管理修改
getter(要和中央文件夹同级!因为是全局)
不同模块下的文件
setting
user
这里提到了一个namespaced:命名空间,可以理解为相当于一个锁,模块里面使用了的话就不能全局了
这是直接写的
如果使用辅助函数
以上的东西,全放到下面的↓
直接放到一个中央文件夹里面
使用:
插值表达式
$store.state写死
辅助函数(若有命名空间需要区分)