vue实现将数据存入vuex中以及从vuex中取出数据


Posted in Javascript onNovember 08, 2019

1、在store文件下面新建文件 print.js ,写入以下代码

/**
   * 存放 ** 数据
   * **/
  
  // initial state
  const state = {
    all: { 
      ID:'',
      BrandID:''
    }
  }
  
  // getters
  const getters = {}
  
  // actions
  const actions = {}
  
  // mutations
  const mutations = {
    setPrint(state, all) { //设置参数
      state.all = all;
    }
  }
  
  export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
  }

注意:记得在store下面的index.js文件中引入这个文件

import Vue from 'vue';
 import Vuex from 'vuex';
 import print from './module/print';
 const debug = process.env.NODE_ENV !== 'production';
 Vue.use(Vuex);
  export default new Vuex.Store({
  modules: {
      print
  },
  strict: debug, //开启严格模式
    plugins: debug ? [createLogger()] : []
  })

2、将数据存入vuex中(在要存入数据的页面写)

this.$store.commit("print/setPrint", { //print 表示vuex的文件名
    ID: this.ID,
    BrandID: 402
  });

3、将数据从vuex中取出来使用(在要使用的页面写)

import { mapState, mapActions } from "vuex";
  computed: {
    ...mapState({
       print:state=>state.print.all
    })
   }

在用到的地方直接写入以下代码即可:

this.CreateID = this.print.ID;
  this.GoodsID = this.print.BrandID;

以上这篇vue实现将数据存入vuex中以及从vuex中取出数据就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 继承机制的实现(待续)
May 18 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
Jun 07 Javascript
javascript中使用css需要注意的地方小结
Sep 01 Javascript
javascript语言结构小记(一)
Sep 10 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
深入理解js中的加载事件
Feb 08 Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
微信小程序实现form表单本地储存数据
Jun 27 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 Javascript
vue.js的简单自动求和计算实例
Nov 08 #Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 #Javascript
Vue搭建后台系统需要注意的问题
Nov 08 #Javascript
vue视频播放暂停代码
Nov 08 #Javascript
vue-dplayer 视频播放器实例代码
Nov 08 #Javascript
BootstrapValidator实现表单验证功能
Nov 08 #Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 #Javascript
You might like
php 计划任务 检测用户连接状态
2012/03/29 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
PHP实现视频文件上传完整实例
2014/08/28 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
PHP精确计算功能示例
2016/11/29 PHP
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
菜鸟javascript基础整理1
2010/12/06 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
js闭包的用途详解
2014/11/09 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
js实现随机数小游戏
2019/06/28 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
利用python批量修改word文件名的方法示例
2017/10/17 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
Flask之请求钩子的实现
2018/12/23 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
化工专业个人的求职信范文
2013/11/28 职场文书
安全责任协议书
2014/04/21 职场文书
工作检讨书500字
2014/10/19 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书