20、vuex基础及使用
2022-04-01 12:44:39 0 举报AI智能生成
vue
作者其他创作
大纲/内容
定义
vuex 是为了解决 组件间的数据交互；专门针对vue的一种数据管理模式
vue中实现公共状态管理的插件
前提：
SPA单页面（实现的是同一个页面中，各组件的信息通信）
步骤
1、创造一个vuex实例
配置项 state、mutations、actions、getters、modules
2、把创造的实例 注入到根组件中
注入完成之后 每一个组件中 都多了一个$store的属性
注意
$store 中的 state 中存储的就是我们的数据源
配置项
state
作用
存放组件之间需要共享的公共状态
即Vuex中的基本数据！
使用
尽量通过 mutations 中的方法修改这些数据，不要直接修改
调用
直接使用 state 在视图中渲染
mutations
作用
这个属性中存储的都是用来更改 state 中的数据的同步方法
使用
这些方法都至少有一个参数，最多两个
参数
1、第一个参数是 vuex 默认传的 state（数据源）
2、第二个参数 是我们通过 commit 调用 mutations 中的对应方法的时候传递的参数
调用
this.$store.commit('mutations中的方法名'，传过去的参数)
扩展
这里的函数必须都是同步函数(它是认为约定不是技术规定) 为什么呢？
答
是为了方便状态可控，修改状态 有迹可循；
getters
作用
可以对state中的成员加工后传递给外界
理解成vuex的计算属性即可
什么时候才会选择使用getters
当多个组件共用一套处理逻辑的时候选择使用
若这个逻辑只在一个组件使用 不建议写getters中，因为这会增大vuex的体积；
使用
如不需要，第二个参数可以省略
参数
1、state 当前VueX对象中的状态对象
2、getters 当前getters对象，用于将getters下的其他getter拿来用
调用
this.$store.getters.fullInfo
actions
作用
由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。
这个属性中存储的 一般都是一些异步执行的方法， 为了在异步执行完成之后 再去通过 commit触发mutations中的对应函数
使用
Action 提交的是 mutation 中的方法，而不是直接变更状态
参数
1、context （与 store 实例具有相同方法和属性的 context 对象）
2、第二个参数是我们在通过dispatch调用时传递的参数
调用
this.$store.dispatch('actions中的方法名'，传给他的参数)
modules
作用
使用单一状态树，导致应用的所有状态集中到一个很大的对象。但是，当应用变得很大时，store 对象会变得臃肿不堪。
为了解决以上问题，Vuex 允许我们将 store 分割到模块（module）。
每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
使用
注意
对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。
对于模块内部的 getter 和 actions ，根节点状态会作为第三个参数暴露出来：
命名空间
默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的，这样使得多个模块能够对同一 mutation 或 action 作出响应。
解决
在跟模块下加 namespaced:true 属性
会把当前模块作为一个封闭空间
调用
调用指定模块下的 mutations 中的方法
辅助函数
...Vuex.mapState(['state中的状态名称'])
在哪个组件使用，就相当于把 state 中的属性挪到了哪个组件中
一般挪到计算属性中使用
...Vuex.mapMutations(['mutations中的方法名称'])
在哪个组件中使用，就相当于把 mutations 中的方法移到了本组件的methods中
...Vuex.mapActions()
在哪个组件中使用，就相当于把 actions 中的方法移到哪个组件中
...Vuex.mapGetters()
注意
注意名字 “[名字]” 不能与组件中的属性名重复
如果本组件中有了这个属性名，我们还想用辅助函数的时候就需要如下方式命名
解决
...Vuex.mapState({
count123:'count'
})
count123:'count'
})
之后在本组件中使用时，用 count123 这个名字即可
0 条评论
下一页
