手摸手教你在vue-cli里面使用vuex,以及vuex简介
2017-12-11 14:23
555 查看
写在前面:
这篇文章是在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
相关文章推荐
- vuex在vue-cli和webpack构建的项目中的简单使用
- 2-2 vue环境搭建以及vue-cli使用
- 在 vue-cli 脚手架中引用 jQuery、bootstrap 以及使用 sass、less 编写 css [vue-cli配置入门]
- 基于vue-cli的vue项目之vuex的使用5------watch监听vuex内部数据变化
- vue-cli3脚手架的配置以及使用
- 对于Vue-cli的路由跳转以及使用vue.js动态修改CSS样式
- vue-cli3脚手架的配置以及使用
- 基于vue-cli的vue项目之vuex的使用5------watch监听vuex内部数据变化
- vue环境搭建以及vue-cli使用
- 在 vue-cli 脚手架中引用 jQuery、bootstrap 以及使用 sass、less 编写 css [vue-cli配置入门]
- 详解如何在vue-cli中使用vuex
- 使用vue-cli打包过程中的步骤以及问题的解决
- vue-cli 中使用Vuex
- 使用vue-cli打包过程中的步骤以及问题
- 详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
- 使用vue-cli没有'dev-server.js'以及'dev-client.js'文件
- 使用vue-cli(vue脚手架)快速搭建项目的方法
- vue-cli checkbox绑定数据使用
- vue2.0实战之使用vue-cli搭建项目(2)
- VUE使用vuex解决模块间传值问题的方法