详解如何在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 相关文章推荐
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
jquery中radio checked问题
Mar 16 Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 Javascript
浅谈vue中resetFields()使用注意事项
Aug 12 Javascript
使用Vant完成Dialog弹框案例
Nov 11 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 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中的stdClass类
2014/04/18 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
php程序内部post数据的方法
2015/03/31 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
为数据添加append,remove功能
2006/10/03 Javascript
JavaScript开发时的五个注意事项
2007/12/08 Javascript
FF IE兼容性的修改小结
2009/09/02 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
2020/10/27 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
详解Python爬虫的基本写法
2016/01/08 Python
用python爬取租房网站信息的代码
2018/12/14 Python
python实现网页自动签到功能
2019/01/21 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
什么是反射?如何实现反射?
2016/07/25 面试题
腾讯公司的一个sql题
2013/01/22 面试题
家长对孩子评语
2014/01/30 职场文书
运动会加油稿100字
2014/09/19 职场文书
部门2014年度工作总结
2014/11/12 职场文书
工作年限证明范本
2015/06/15 职场文书
Python语言内置数据类型
2022/02/24 Python