详解如何在vue-cli中使用vuex


Posted in Javascript onAugust 07, 2018

前言

众所周知,vuex 是一个专为 vue.js 应用程序开发的状态管理模式,在构建一个中大型单页应用中使用vuex可以帮助我们更好地在组件外部管理状态。而vue-cli是vue的官方脚手架,它能帮助我们方便的配置webpack。这样看来,有很大的可能我们需要同时使用vue-cli与vuex

如何在vue-cli中使用vuex

项目搭建及添加vuex

当我们使用vue-cli搭建一个vue项目的时候(假设项目名为learn-vuex),搭建完成后的文件目录是这样子的

详解如何在vue-cli中使用vuex 

首先使用npm install --save-dev vuex 把vuex添加到依赖,接下来就是如何在组件中使用vuex,大体上来说有以下两种形式。

通过 store 选项

如果vue-cli搭建成功,在src目录下会有一个main.js文件,main.js的主要作用是把项目中最顶层的app.vue组件挂载到DOM中,其他所有的组件都可以看做是app.vue的子组件。

在main.js中,做如下操作

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'; 

Vue.config.productionTip = false

//注意下面的代码
Vue.use(Vuex);
const store = new Vuex.Store({
 state: {},
 getters: {},
 actions: {},
 mutations: {}
});
//注意router选项,此处的写法等同于store: store
new Vue({
 el: '#app',
 router,
 store,
 components: { App },
 template: '<App/>'
})

在组件中,就可以通过this.$store 来使用store实例

如果在项目中需要配置的vuex选项很多,我们则应该把vuex的相关代码分割到不同模块

在src下新建store文件夹,在文件夹中创建如下几个文件

详解如何在vue-cli中使用vuex 

我们可以随意设置文件名,但最好可以通过文件名就能判断出这个文件是用来干嘛的

  1. index.js:整合各个模块,创建并导出vuex实例
  2. rootState.js:配置vuex实例的state选项
  3. getters.js:getter选项
  4. mutations.js:mutations选项
  5. actions.js:actions选项

在index.js中,我们需要

import Vue from 'vue';
import Vuex from 'vuex';
import state from './rootState.js';
import getters from './getters.js';
import mutations from './mutations.js';
import actions from './actions.js';

Vue.use(Vuex);
const store = new Vuex.Store({
 state,
 getters,
 actions,
 mutations
});

export default store;

剩下的四个文件配置都差不多一样,以rootState.js为例

const state = {
 count: 0,
 arr: [0,1,2,3,4,5]
}

export default state;

如此这般,在main.js中,我们需要编写的代码就减少了很多

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index'; 

Vue.config.productionTip = false

new Vue({
 el: '#app',
 router,
 store,
 components: { App },
 template: '<App/>'
})

将vuex实例挂载到vue原型链上

这是一种非主流的方式,主要是受axios启发,这里有一篇博客讲解如何在vue组件中使用axios,将axios挂载到vue原型链上是因为不能通过vue.use来使用axios

在这种方法中,我们需要

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index'; 

Vue.config.productionTip = false

//在vue中使用vuex必须先调用vue.use方法
Vue.use(Vuex);
//具体挂载到vue原型的哪个属性上,可以由我们自行决定
//遇到配置繁多的情况也可以进行分割
Vue.prototype.$store = new Vuex.Store({
 state: {},
 getters: {},
 actions: {},
 mutations: {}
});

//没有了store选项
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

如此这般,还是可以通过this.$store 来使用vuex

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript学习点滴 call、apply的区别
Oct 22 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
JavaScript实现随机点名器
Mar 25 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
JavaScript 与 TypeScript之间的联系
Nov 27 Javascript
React styled-components设置组件属性的方法
Aug 07 #Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 #Javascript
详解vue axios用post提交的数据格式
Aug 07 #Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 #Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 #Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 #Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 #Javascript
You might like
Javascript 浮点运算的问题分析与解决方法
2013/08/27 Javascript
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
jQuery实现菜单栏导航效果
2017/08/15 jQuery
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
Python基于twisted实现简单的web服务器
2014/09/29 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
python获取linux系统信息的三种方法
2020/10/14 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
教师岗位职责范本
2013/12/29 职场文书
教师试用期自我鉴定
2014/02/12 职场文书
机修工工作职责
2014/02/21 职场文书
对孩子的寄语
2014/04/09 职场文书
安全生产大检查方案
2014/05/07 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书