前段框架——VueX

嗯～这个vuex是有点不太好理解的，身为一个后端程序猿研究了好几天的前端的东西，

也是很不容易啊。

我们先来简单的说一下vuex的用处：

一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 ( 父组件 )

按钮交互的时候 , 它们之间的通讯很麻烦。

打个比方，当你要写购物车的时候，你会把子组件中的商品，添加到购物车中，在添加到购物车的过程中，你可以用组件传值，一级一级的传，你也可以直接添加到购物车中，但是你又怎么确定，你在添加购物车的过程中没有别的操作，像这种交互很多的情况下，我们就需要一个全局的静态区，来把要添加到购物车的商品全部添加到静态区中，然后统一添加到购物车中。

好，我们进入正题。vuex和get请求一样，都是要在工程创建好之后，在这里一定提一下，使用Vuex时，不能起名为Vuex。

因为我刚开始创建新工程的时候，可是踩了很多坑的～

在工程下得终端输入：（每创建新工程，都要下载的）

npm install vuex --save 这条指令，来下载vuex文件的。

下载完毕之后，来到这个文件夹下，找到一个叫vuex的文件（在最下面），就说明这个功能已经是你的了～

使用vuex：

为了便于日后的维护，我们分开写更好，我们在src目录下，新建一个store文件夹，然后在里面新建一个index.js。

这个index.js就是在上面说的静态区。

然后我们在mian.js中配置：

先大致说一下这个index.js文件，这个文件中，分为state，mutations, actions

state用法：this.$store.state.属性名 (可读写)　　　　　　　　　　　　　　　　 —— 给XXX赋值

actions : this.$store.dispath('action方法名' ，参数）　　　　　　　　　　　　　 —— 对外调用，mutations中的值（因为mutations不能对外传值）　

mutations : 由对应action触发(context.commit( 'mutations方法名' ) ,参数) —— 把自己的值存入actions中

一般mutations和一个actions对应

下面就用到了actions，上面也说了因为mutations不能对外，所以就会用到actions来将mutations方法对外

转载于:https://www.cnblogs.com/buwang/p/9936754.html

前段框架——VueX相关推荐

Canvas动画转视频-前段框架whammy
Canvas动画转视频-前段框架whammy whammy是在前端将canvas动画转视频,它的github地址为:https://github.com/antimatter15/whammy 由于英 ...
Vue - 前段框架
文章目录前言 Vue概念同类产品官网特点渐进式框架入门案例.html 改造入门案例.html MVVM框架基础语法运算符 operator 方法 methods Vue解析数据三种d ...
JavaWeb（3）之前段框架---BootStrap
BootStrap css样式文档组件文档 JavaScript插件文档什么是BootStrap?BootStrap的作用? Bootstrap,基于HTML.CSS. JAVASCRIPT 的前 ...
前段框架——Vue的get和post请求数据
vue的get请求和post请求其实很简单 1.首先我们要在编译软件的终端下输入指令: npm install --save axios vue-axios 来下载两个文件. 2.其次,我们要在使用g ...
layui 日期重置_layui前段框架日期控件使用方法详解
本文实例为大家分享了layui-日期控件的实现代码,供大家参考,具体内容如下日期目前Layui中的日期组件还是layDate 1.1的改良版,它后续将会进行一次重写. 顺便列举几个常用例子范围选 ...
vue vuex vue-router后台项目——权限路由（超详细简单版）
项目地址:vue-simple-template 共三个角色:adan barbara carrie 密码全是:123456 adan 拥有最高权限A 他可以看到 red , yellow 和 bl ...
Vue.js实现前段评论展示
本来想着给这个博客弄个回复系统(类似知乎的回复),最初的实现思路是这样的:主评论后台渲染,前台新增的评论,回复用jquery操作dom放到页面上.实现的时候感觉好复杂,大量的dom操作,目前前段框架不 ...
.NET开发框架(一)-框架介绍与视频演示
本文主要介绍一套基于.NET CORE的SPA高并发.高可用的开发框架. 我们暂且称它为:(让你懂.NET)开发框架. 以此为主线,陆续编写教程,讲述如何构建高并发.高可用的框架. (欢迎转载与分享) ...
一代经典框架 Layui 落幕，是否预示着一个时代的结束？
点击关注公众号,实用技术文章及时了解来源:cnblogs.com/mqingqing123/p/15329717.html 缘起偶然的事件,看到 LayUi(读音 "类UI") ...

前段框架——VueX

前段框架——VueX相关推荐

最新文章

热门文章