手摸手教你在vue-cli里面使用vuex,以及vuex简介
来源:互联网 发布:在ubuntu安装anaconda 编辑:程序博客网 时间:2024/05/16 19:07
写在前面:
这篇文章是在vue-cli里面使用vuex的一个极简demo,附带一些vuex的简单介绍。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家。
本文首发于我的个人blog:obkoro1.com
引入步骤
我创建了一个新的vue-cli里面什么东西都没有,只引用了vuex,这里是码云地址,可以下载下来,然后npm install
、npm run dev
试试看,里面vuex的使用地方也全都注释了一遍。
安装
npm install vuex --save
在src目录下创建文件夹vuex
该文件夹包含以上文件,创建好了之后,我们一个一个文件来说里面都有什么东西。
vuex/index.js
import Vue from 'vue';import Vuex from 'vuex';import status from './modules/status/index';//引进模块Vue.use(Vuex);export default new Vuex.Store({ modules: { //Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action dataStatus:status,//访问这里面数据的时候要使用'dataStatus' },});
这是vuex的主文件store,这个例子是把state、mutation、action分割成模块,然后再将每个模块引用进这个index.js文件里面,等我们整个文件夹的文件都搭好之后,还要把文件引入到main.js里面、
vuex/modules/status/index.js
import actions from './actions';import mutations from './mutations';//引入action和mutations export default { state:{ //这里面是要读取或者写入数据的地方 msg:'默认状态', }, //state actions mutations顺序不能乱 actions: actions, mutations: mutations,}
这是一个模块里面的主文件,模块内部拥有自己的state、actions、mutions,是从上到下进行分割的。
vuex/modules/status/mutation_type.js
//这个js文件里面只是一些变量,把action和mutation文件里面相同变量名的链接起来export const VUEX_TEST = 'VUEX_TEST';// 一般使用的是大写来命名变量,因为尤大也是这么做 2333
vuex/modules/status/actions.js
import * as types from './mutation_type'; //引入变量export default { actionFn({commit},data){ //actionFn是在组件通过dispatch触发的函数名 可以理解成组件和actions的连接 commit(types.VUEX_TEST,data); //types.VUEX_TEST 是要commit到mutation的哪个位置 变量的作用 //data 是传过来的参数 }};
vuex/modules/status/mutations.js
import * as types from './mutation_type';//引入变量export default { //types.VUEX_TEST 代表接受哪个actions的commit 也就是上面引入变量的作用 [types.VUEX_TEST](state,data){ //第一个参数state是这个模块的state 第二个参数是传进来的数据 if(data.status==1){ //根据传进来的参数做各种操作 //这里就是操作state了,赋值之后,各个组件上面引用该数据的地方会自动更新 state.msg=data.text; }else if(data.status==2){ state.msg='奕迅'; } //这里是随便写的一个栗子 console.log(state.mg,data,'mutation'); }};
这两个文件里面有注释,解释的蛮清楚的。当把所有文件创建好了之后,再回过头来看看每个文件之间都有联系,多想想或许就懂点什么东西了 emmm
vuex文件夹,文件目录以及下载
引入main.js
[图片上传失败…(image-2ab6e9-1512973258307)]
上面的vuex文件夹只是搭建一个store,但是这样还不够,我们还要在项目里面使用这个。引用到main.js,如图所示。
组件中如何使用。
[图片上传失败…(image-ddd8e-1512973258307)]
使用的话就是像上面那么使用,本文只是一个简单的示例,还有更多骚操作,等大家上手之后再慢慢摸索咯。
git地址
感觉写的蛮乱的,大家如果看不太懂的话,可以到码云去下载文件,然后自己跑一跑,多看看,试一试就应该没问题了。
vuex简介
通常我是希望大家先学会用,然后再了解后面的机制,每次我看博文的时候,一大段原理贴上来,都给我弄懵逼了。。
vuex主要是用来复杂项目之间的组件通信功能,简单的项目不要用这套复杂的事件以及状态管理机制。项目如果不够复杂的话推荐我之前写的:在vue项目中 如何定义全局变量 全局函数,使用全局变量的形式的也可以实现需求。
vuex实现的作用:数据共享机制
通过统一的数据中心store维护状态数据,每个组件进行更新的时候,通知数据中心store。再由stroe将共享的状态,触发每一个调用它的组件的更新。
vuex的工作流程
大家先仔细看看下面这张图,理解他的工作机制。
[图片上传失败…(image-b7b41-1512973258307)]
- 在vue组件里面,通过dispatch来触发actions提交修改数据的操作。
- 然后再通过actions的commit来触发mutations来修改数据。
- mutations接收到commit的请求,就会自动通过Mutate来修改state(数据中心里面的数据状态)里面的数据。
- 最后由store触发每一个调用它的组件的更新
注意:这套模型是单向流动的
后话
以上就是本文的所有内容了,希望可以帮到大家。
最后:如需转载,请放上原文链接并署名。码字不易,感谢支持!本人写文章本着交流记录的心态,写的不好之处,不撕逼,但是欢迎指点。然后就是希望看完的朋友点个喜欢,也可以关注一下我。
个人blog and 掘金个人主页
以上2017.12.9
- 手摸手教你在vue-cli里面使用vuex,以及vuex简介
- vue-cli 中使用Vuex
- 基于vue-cli的vue项目之vuex的使用1---------最简单的vuex模板
- 在Vue-cli里应用Vuex的state和mutations
- vuex在vue项目中的使用
- Vue---使用vuex
- Vue---使用vuex
- vue-cli结合vuex架构目录
- 基于vue-cli的vuex学习笔记
- 基于vue-cli的vue项目之vuex的使用5------watch监听vuex内部数据变化
- 在vue中引入vuex
- 使用vue开发的你是不是 真正需要Vuex
- 基于vue-cli的vue项目之vuex的使用2-------commit参数
- 基于vue-cli的vue项目之vuex的使用3-------action异步传参
- 基于vue-cli的vue项目之vuex的使用4-------moudles分块
- vue在使用vuex时遇到...mapGetter不能使用解决方案
- 在Vue中使用Vuex进行状态管理指南
- Vue2.0 框架配置:vue-cli + vue-router + vuex
- 安装API网关kong遇到的一些坑及解决办法
- 解决关于iis 中使用 word COM+ 组件的问题 ,应该基本上 都是 权限授权的问题
- ios音乐播放器-仿QQ音乐
- pyspark之DataFrame学习(1)
- css--图片处理
- 手摸手教你在vue-cli里面使用vuex,以及vuex简介
- Zuul超时问题,微服务响应超时,zuul进行熔断
- 上传文件测试用例
- lua中require和module
- android7.0 编译问题 Try increasing heap size with java option '-Xmx<size>'
- 如何绘制程序流程图
- android使用字体图标
- [面试]TCP的三次握手和四次挥手协议
- leetcode 424. Longest Repeating Character Replacement 移动窗口解决问题