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 相关文章推荐
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
百度地图给map添加右键菜单(判断是否为marker)
Mar 04 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
JavaScript学习笔记--常用的互动方法
Dec 07 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 Javascript
js中switch语句的学习笔记
Mar 25 Javascript
jQuery实现的分页插件完整示例
May 26 jQuery
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中文乱码
2009/11/26 PHP
PHP之生成GIF动画的实现方法
2013/06/07 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
php 批量查询搜狗sogou代码分享
2015/05/17 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
javascript实现考勤日历功能
2018/11/29 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
Python实现全局变量的两个解决方法
2014/07/03 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
软件测试面试题
2014/01/05 面试题
财务管理专业推荐信
2013/11/19 职场文书
用人单位聘用意向书
2015/05/11 职场文书
MySQL GRANT用户授权的实现
2021/06/18 MySQL
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL