vuex流程

2023-03-14 04:26:04 来源:网络

vuex流程

Vue 中 store 基本用法

用来管理状态,共享数据,在各个组件之间管理外部状态

第一步:项目安装vuex插件

第二步:引入vuex,并通过use方法使用它

第三步: 创建状态仓库

//创建状态仓库,注意第二个Store是大写的不能改,,state也是不能改

第四步:在main.js注入Vue实例当中

第五步:通过this.$sore.state.XXX拿到全局状态

七、Vuex的相关操作

vuex状态管理的流程

view——­>actions—–>mutations—–>state——­>view

一、

方法一、更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

在其他组件中利用commit来触发mutations函数

this.$mit('increase',xxx) xxx 表示传入参数,如果需要传入多个参数,将 xxx 表示成对象 {xxx1:'',xxx2:''} 方式传入,在对象内构成多个需要传入参数。

方法二:

利用actions中对mucations进行操作,间接对state进行修改

利用dispatch来触发actions函数

mucations和actions两者之间区别

1、传递参数不一样,前者传递是state,后者传递是context。

2、调用的方式不一样,前者靠 this.$mit('xxx') 触发,后者靠 this.$store.dispatch('xxx') 触发。

3、actions可以包含异步操作,但是mutation只能包含同步操作

二、getters是vuex中的一个属性,主要作用于vue中的计算属性(computed)类似,用来存放一些经过修改的数值

在调用getters中的内容是使用$store.getters.函数名进行调用

总结:在工程化项目中,vuex所有内容建议和routers一样,在src中建立一个state文件夹>index.js,将vuex内容写在index.js中,再导出到main.js中。

免责声明:内容来自网络,若侵犯您的权利,请在一个月内通知我们,会及时删除 @轻流