专门为vue应用程序开发的状态管理模式,采用集中式存储管理应用的所有组件的状态(数据),以相应的规则保证状态以一种可预测的方式发生改变
Vuex的作用(什么样的情况下使用Vuex)
多个视图依赖于同一个状态(数据),来自不同视图的行为需要变更同一状态
Vuex的流程图和操作结构图
假设这个组件需要从后台拿到数据,那么就牵扯到异步操作,所以将异步操作定义在Actions中,组件中触发这个Actions,Actions中执行异步请求,拿到后台接口,然后拿到数据,需要将数据提交一个mutations改变状态,然后重新渲染组件中的状态
vuex 核心概念和 API
state:vuex 管理的状态对象,它应该是唯一的
mutations:包含多个直接更新 state 的方法(回调函数)的对象,谁来触发: action 中的 commit('mutation 名称'),只能包含同步的代码, 不能写异步代码
modules:包含多个 module,一个 module 是一个 store 的配置对象,与一个组件(包含有共享数据)对应
Vuex的基本使用(通过一个简易计算器实例分析Vuex流程)
然后启动项目,可以看到下面的界面
接下来先安装vuex模块
定义一个容器,并且将这个容器导出去,这个store容器,包含应用中的大部分状态,store的特点:
一个页面只能有一个store
状态存储是响应式的(就是说当state中的某个状态值发生改变的时候,使用了这个状态值的组件中的数据也会跟着改变,所以只要改变state中的状态就可以了)
不能直接改变store中的状态,唯一途径就是显示地提交mutations
在store容器中定义一个对象,叫做state,里面存放的都是应用中共享的状态(数据),也就是说包含所有应用级别状态的对象,比如下面定义一个count的状态
然后在这个state中拿到想要的那个状态值
接着在组件中通过事件来触发改变state里面的某个状态值,改变state中的状态值需要通过Mutations(唯一修改状态的事件回调函数)
状态存储是响应式的(就是说当state中的某个状态值发生改变的时候,使用了这个状态值的组件中的数据也会跟着改变,所以只要改变state中的状态就可以了)
不能直接改变store中的状态,唯一途径就是显示地提交mutations
然后再组件中通过事件来提交一个mutations并且触发里面相应函数
测试,点击加号或者就可以改变count这个状态值,并且查看vue调试工具可以看到数据的变化
在点击事件提交一个mutations的时候,可以传入第二个参数,比如下面我想要点击一次加5或者减5
在容器中的mutations可以接收第二个参数,这个参数叫做payload
运行测试可以看到,点击一次以5来计算
当需要传递很多个参数的时候,第二个参数写成对象的形式
运行测试:
还可以使用下面这种写法:mutations中接收参数也是一样的写法接收一个payload,然后获取payload下的某个参数值
Action异步操作
当点击某个按钮需要从后台请求数据的时候,这个时候有异步的操作,这里就使用上面的例子来模拟一下异步的操作
在组件中触发的时候,先触发actions,然后在提交mutations
getters计算属性
vuex的API使用
mapState的使用:直接获取state中的某个数据
mapGetters的使用:获取getters中的对应的get名称的返回值
mapActions的使用:触发store下的actios下对应的action,事件名称跟action的名称需要一样(开发中一般不这么写,不可以传递参数)
mapMutations的使用:跟mapActions的使用一样
实际开发项目中应该如何使用vuex
目录结构
这里是两个模块feeds和movies
第二步:在每个模块内的index文件这组装所有的零件(state,actions,mutations,getters),并且输出
注意上面多出的一行,我们在组件里怎么区分不同模块呢?namespaced写成true,意思就是可以用这个module名作为区分了(也就是module所在的文件夹名)
第三步:在组件里使用获取state中的数据,在组件的计算属性中写
如果是全局下的state
如果是模块下的state,这里表示获取movies模块下的projectApplyId这个数据