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条件判断使用小技巧总结
Sep 08 Javascript
javascript 命名规则 变量命名规则
Feb 25 Javascript
jquery 插件学习(六)
Aug 06 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
不同Jquery版本引发的问题解决
Oct 14 Javascript
用js实现in_array的方法
Nov 05 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
详解jQuery选择器
Dec 21 Javascript
jQuery实现简单日历效果
Jul 05 jQuery
Canvas三种动态画圆实现方法说明(小结)
Apr 16 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提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
PHP删除数组中特定元素的两种方法
2019/02/28 PHP
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
python更新列表的方法
2015/07/28 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
老生常谈Python基础之字符编码
2017/06/14 Python
Python_LDA实现方法详解
2017/10/25 Python
Python初学者常见错误详解
2019/07/02 Python
python随机生成库faker库api实例详解
2019/11/28 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
python logging模块的使用
2020/09/07 Python
python空元组在all中返回结果详解
2020/12/15 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
简述你对Statement,PreparedStatement,CallableStatement的理解
2013/03/25 面试题
学校教研活动总结
2014/07/02 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python