vuex记录

2024-10-21 16:40:22

vuex就是vue中管理状态的地方，控制着组件之间的数据；

5大核心，通常只要有state和mutation就能满足vuex最基本的需求

1.state 项目存放各种状态的地方

2.mutation 修改数据的方法，修改简单同步数据

3.Action 类似mutation,不同是用commit提交mutations方法，让mutation改变state数据，也就是间接的改变state数据

那为什么有了mutation,也还有action，存在即正义

将多个mutation方法，封装在一起调用，action的内部可以异步执行代码，而muatation中不可以

4.getter 数据监听地方，一旦改变数据，就会触发，就相当于vuex中的计算属性，类似vue中computed计算属性

5.module 可以在new Vuex.Store()里面使用，引用多个存放数据组件

总结：state和getter都可以获取全局存放状态，但是getter也是基于state的获取，getter用于重新包装state数据的地方，语法糖的使用，也很相近

mutation和action都是用来存放修改state的方法，action是将mutation方法封装在一起调用，语法糖的使用也极为相近

state基本用法：

调用方法1：适用于简单的项目里面，

在computed中调用，通过this.$store.state来获取值

调用方法2：vuex已经封装好的语法糖，简单高效mapState

,引入语法糖

语法糖的使用方法

mutation基本用法:

调用方法1：适用于简单的项目，通过commit提交方法，来设置

调用方法2：语法糖mapMutations

也可以...mapMutations(['setNum',''addNum'])这样调用，不重新改名，直接调用就行

action基本用法：默认接受一个commit来提交事件

例：delaySetNum函数在2秒后调用mutation中的setNum方法

调用方法1：通过dispatch调用action里面的函数

调用方法2：语法糖mapActions

mutations和actions的区别：

都可以处理异步，但是mutations不能返回异步处理结果

所以：如果异步处理的结果，外面不需要，就无所谓用mutations或者actions

但是，如果外面需要异步处理的结果，就要用actions;

组件中接收返回值：

getter基本用法：默认接受一个参数state,就是vuex中的state,重新计算属性

调用方法1:也是在computed中调用

调用方法2：使用语法糖mapGetters

module模块化：

当应用非常复杂时，如果在使用单一的store，会造成引用相当的复杂，

将store模块化，每一个模块又拥有自己的state,getter,mutation,action

简单引入两个模块

获取不同模块状态state还是很方便

但是getter,mutation,action就不可以，因为时全局注册，要想也在自己的模块中使用，就要设置namespaced: true，使其成为带命名的空间模块

开启之后调用方法就会自动加入一个模块命名

例：1个调用a模块的setNum方法，另外一个调用b模块的setNum方法

小技巧：

当mutation中方法名字过多，可以使用常量，将名字放在一个文件夹中，一目了然；

严格模式，确保属性是通过mutation修改，不然会报错，仅仅是在开发模式下

最新文章

热门文章