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 document.images实例
May 27 Javascript
js 数组实现一个类似ruby的迭代器
Oct 27 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
jquery 清空file域示例(兼容个浏览器)
Oct 11 Javascript
jQuery的ready方法详解
Nov 27 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
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将URL转换成短网址的算法分享
2016/09/13 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
JS 统计时间
2021/03/09 Javascript
多个iframe自动调整大小的问题
2006/09/18 Javascript
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
JavaScript 变量命名规则
2009/09/23 Javascript
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
python缩进区别分析
2014/02/15 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
Python中staticmethod和classmethod的作用与区别
2018/10/11 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
Python中请不要再用re.compile了
2019/06/30 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
python温度转换华氏温度实现代码
2020/12/06 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
企业员工薪酬方案
2014/06/04 职场文书
商务代表岗位职责
2015/02/15 职场文书
信访工作个人总结
2015/03/03 职场文书
2016年师德师风学习心得体会
2016/01/12 职场文书
创业计划书之水果店
2019/07/18 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
python数字图像处理之对比度与亮度调整示例
2022/06/28 Python