VUE使用vuex解决模块间传值问题的方法


Posted in Javascript onJune 01, 2017

在看电影、打Dota、撸代码间来回,犹豫不决,终于还是下决心继续学习VUE。

仿照 conde.js 官网写的一个demo,目前已经基本可用,但始终缺少登录页,没有用户权限管理,于是开撸......

<template>
 <div id="login">
 <c-header></c-header>
 <c-form></c-form>
 <p class="content-block"><a href="javascript:;" rel="external nofollow" rel="external nofollow" @click=showState class="button button-fill button-success">登录</a></p>
 </div>
</template>

外观大概是这样的:

VUE使用vuex解决模块间传值问题的方法

两个输入项通过 c-form 组件导入

由于没有登录接口调用,初步想法是:点击登录,将c-from组件输入的值(用户名和密码)保存在 sessionStorage 中,通过判断 sessionStorage 是否保存了用户信息,来决定用户的操作权限。

现在问题来了——点击登录,如何取得 c-form 组件中的输入值?

最直接的想法就是通过子组件派生事件,父组件监听触发。转念一想,何不使用vuex来进行管理呢?正好之前从来没有认真对待过它。

LOL......

坑坑坑,我踩踩踩

终于,总结出使用 vuex 的三大步骤:

步骤1:安装和创建

安装 vuex:npm i vuex --save

创建 store.js,把基本格式写好:

import Vue from 'vue'
 import Vuex from 'vuex'
 // 首先声明一个状态 state
 const state = {
 msg: ''
 }
 // 然后给 actions 注册一个事件处理函数,当这个函数被触发时,将状态提交到 mutaions中处理
 const actions = {
 saveName({commit}, msg) {
  commit('saveMsg', msg) // 提交到mutations中处理 
 }
 }
 // 更新状态
 const mutations = {
  saveMsg(state, msg) {
  state.msg = msg;
 }
 }
 // 获取状态信息
 const getter = {
 showState(state) {
  console.log(state.msg)
 }
 }


 // 下面这个相当关键了,所有模块,记住是所有,注册才能使用
 export default new Vuex.Store{
 state,
 getter,
 mutations,
 actions
 }

步骤2:在子组件中使用(保存输入)

具体到我这里,是在c-form中使用它:

<template>
 <div>
  <input type="text" @blur=saveName(username) v-model="username" placeholder="Your name">
 </div>
</template>

<script type="text/javascript">
 // 引入mapActions,很重要
 import { mapActions } from 'vuex'
 export default {
 data() {
  return {
  username:'',
  password: ''
  }
 },
 methods: {
  ...mapActions({
  // 在input 的blur 事件中触发回调,并将输入值作为参数返回到store中
  saveName: 'saveName' 
  })
 }
 }
</script>

步骤3:获取在步骤2 中的输入值(获取state)

<template>
 <div id="login">
 <c-header></c-header>
 <c-form></c-form>
 <p class="content-block"><a href="javascript:;" rel="external nofollow" rel="external nofollow" @click=showState class="button button-fill button-success">登录</a></p>
 </div>
</template>

<script>
// 引入mapGtters,很重要
import { mapGetters } from 'vuex'
 export default {
 methods: {
  ...mapGetters([
  // 在store.js 中注册的getters
  'showState'
  ])
 },
 components: {
  "c-form": require('../components/form.vue'),
  "c-header": require('../components/header.vue')
 }
 }
</script>

至此,我们就能得到输入值了。

VUE使用vuex解决模块间传值问题的方法

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

Javascript 相关文章推荐
javascript变量作用域使用中常见错误总结
Mar 26 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
javascript编写实用的省市选择器
Feb 12 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
vue.js指令和组件详细介绍及实例
Apr 06 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
Angular4集成ng2-file-upload的上传组件
Mar 14 Javascript
vue3实现v-model原理详解
Oct 09 Javascript
js实现查询商品案例
Jul 22 Javascript
JavaScript实现网页动态生成表格
Nov 25 Javascript
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
vue快捷键与基础指令详解
Jun 01 #Javascript
详解vuejs几种不同组件(页面)间传值的方式
Jun 01 #Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 #Javascript
Vue.Draggable实现拖拽效果
Jul 29 #Javascript
JS请求servlet功能示例
Jun 01 #Javascript
vue.js加载新的内容(实例代码)
Jun 01 #Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 #Javascript
You might like
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
史上最全面的Java面试题汇总!
2015/02/03 面试题
如何现实servlet的单线程模式
2014/08/05 面试题
个人自我评价分享
2013/12/20 职场文书
写给女生的道歉信
2014/01/14 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python
Redis分布式锁的7种实现
2022/04/01 Redis