详解如何在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中的array数组使用技巧
Jan 31 Javascript
js prototype截取字符串函数
Apr 01 Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
Oct 29 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
js实现多图左右切换功能
Aug 04 Javascript
详解http访问解析流程原理
Oct 18 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
vue实现一拉到底的滑动验证
Jul 25 Javascript
如何基于js判断浏览器版本
Feb 20 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
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
js闭包学习心得总结
2018/04/17 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
Python中%r和%s的详解及区别
2017/03/16 Python
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
Python微信库:itchat的用法详解
2017/08/14 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
python实现两张图片的像素融合
2019/02/23 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
精选干货:Java精选笔试题附答案
2014/01/18 面试题
合作意向书格式及范文
2014/03/31 职场文书
献爱心标语
2014/06/21 职场文书
公司收款委托书范本
2014/09/20 职场文书
2016国培研修心得体会
2016/01/08 职场文书