详解如何在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 相关文章推荐
display和visibility的区别示例介绍
Feb 26 Javascript
jQuery性能优化的38个建议
Mar 04 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 Javascript
jQuery树插件zTree使用方法详解
May 02 jQuery
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
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
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
php fread读取文件注意事项
2016/09/24 PHP
解密效果
2006/06/23 Javascript
很可爱的输入框
2008/08/03 Javascript
jquery JSON的解析方式
2009/07/25 Javascript
IE中createElement需要注意的一个问题
2010/07/13 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
用JS实现选项卡
2020/03/23 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
Python中利用xpath解析HTML的方法
2018/05/14 Python
利用Python检测URL状态
2019/07/31 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
容易被忽略的Python内置类型
2020/09/03 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
纯css3实现鼠标经过图片显示描述的动画效果
2014/09/01 HTML / CSS
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
关于感谢信的范文
2015/01/23 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
php 原生分页
2021/04/01 PHP
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python