Vue--第六天

vuex概述:

组件通信感觉有点白雪。。。。。。。。。。

Vue--第六天_第1张图片

Vue--第六天_第2张图片

创建项目:

为了学习简介,先选几个,后续是要勾选很多的

Vue--第六天_第3张图片

建好后再进行组件导入

创建空仓库:

Vue--第六天_第4张图片

Vue--第六天_第5张图片

Vue--第六天_第6张图片

Vue--第六天_第7张图片

使用:

Vue--第六天_第8张图片

Vue--第六天_第9张图片

上面是store访问,下面是辅助函数的方式。

Vue--第六天_第10张图片

Vue--第六天_第11张图片

Vue--第六天_第12张图片

修改:

修改规则:

Vue--第六天_第13张图片

Vue--第六天_第14张图片

Vue--第六天_第15张图片

Vue--第六天_第16张图片

动态修改:

在vuex中不支持传递多个参数,除了state只能有一个,非要传多个,只能让其成为对象,数组等复杂类型。

Vue--第六天_第17张图片

Vue--第六天_第18张图片

辅助函数mapMutations:

Vue--第六天_第19张图片

actions:

Vue--第六天_第20张图片

Vue--第六天_第21张图片

Vue--第六天_第22张图片

Vue--第六天_第23张图片

辅助函数:mapActions

Vue--第六天_第24张图片

Vue--第六天_第25张图片

Vue--第六天_第26张图片

getters:

Vue--第六天_第27张图片

Vue--第六天_第28张图片

Vue--第六天_第29张图片

Vue--第六天_第30张图片

模块(module):

介绍:

Vue--第六天_第31张图片

分模块:

Vue--第六天_第32张图片Vue--第六天_第33张图片

Vue--第六天_第34张图片

Vue--第六天_第35张图片

数据访问:

Vue--第六天_第36张图片

Vue--第六天_第37张图片

Vue--第六天_第38张图片

Vue--第六天_第39张图片

Vue--第六天_第40张图片

Vue--第六天_第41张图片

getters:

Vue--第六天_第42张图片

Vue--第六天_第43张图片

Vue--第六天_第44张图片

mutation:

Vue--第六天_第45张图片

Vue--第六天_第46张图片

Vue--第六天_第47张图片

actins:

Vue--第六天_第48张图片

案例:

Vue--第六天_第49张图片

还有一点,查询接口文件需要开着cmd窗口开启服务

在系统开发的时候,如果需要使用后端接口,可以自己编写一个json文件进行测试。

1.在终端输入:npm install -g json-server    下载服务

2.在文件输入: json-server --watch index.josn  查看文件

Vue--第六天_第50张图片

Vue--第六天_第51张图片

注意:如果权限不够,记得按照如下方式操作

Vue--第六天_第52张图片

Vue--第六天_第53张图片

Vue--第六天_第54张图片

完整代码在购物车案例

你可能感兴趣的:(vue.js,前端,javascript)