Vuex

最新推荐文章于 2024-09-22 18:59:52 发布

原创最新推荐文章于 2024-09-22 18:59:52 发布 · 189 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vuex

Vue 专栏收录该内容

3 篇文章

订阅专栏

一.简介：
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
二.五个属性：
① 存储状态state
② 获取状态getters
③ 改变状态mutations
④ 异步操作actions
⑤ module
三.简单使用
1.安装：cnpm i vuex --save
2.在src目录下新建store/store.js

3.在main.js中引入store并全局注入
在这里插入图片描述

3.store.js中

4.<组件>.vue中

四.小结
1.vue store存储commit和dispatch区别
dispatch:含有异步操作（向后台发送请求获取数据）
写法：this. $s t o r e . d i s p a t c h (^{'} m u t a t i o n s 方法名^{'} ，值) c o m m i t ：同步操作写法： t h i s .$ store.commit(‘mutations方法名’，值)
2.vuex中的modle
①功能：让每一个模块拥有自己的state,getters,mutation,action，使得结构非常清晰，方便管理
②写法：
在这里插入图片描述
③模块内部的数据
(1)内部state,模块内部state是局部的，例car.js模块state中的list数据，通过this. $s t o r e . s t a t e . c a r . l i s t 获取 (2) 内部 g e t t e r s, m u t a t i o n s, a c t i o n s 仍然注册在全局命名空间内，这是为了多模块可以同时响应同一 m u t a t i o n s, 通过 t h i s .$ store.carGetters就可以拿到