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 相关文章推荐
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
基于Jquery代码实现手风琴菜单
Nov 19 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
纯javascript版日历控件
Nov 24 Javascript
详解jQuery中基本的动画方法
Dec 14 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
vue实现微信分享功能
Nov 28 Javascript
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
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正则表达式之定界符和原子介绍
2012/10/05 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
JavaScript执行顺序详细介绍
2013/12/04 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
js表头排序实现方法
2015/01/16 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
一名老师的自我评价
2014/02/07 职场文书
社区居务公开实施方案
2014/03/27 职场文书
保险专业求职信
2014/07/07 职场文书
法人委托书范本格式
2014/09/15 职场文书
股权转让协议范本
2014/12/07 职场文书
作文之亲情600字
2019/09/23 职场文书
Pandas自定义选项option设置
2021/07/25 Python
深入理解 Golang 的字符串
2022/05/04 Golang