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 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
Sep 02 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
Jan 27 Javascript
javascript判断office版本示例
Apr 11 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
深入理解JavaScript的async/await
Aug 05 Javascript
Vue仿Bibibili首页的问题
Jan 21 Vue.js
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
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
JavaScript日历实现代码
2010/09/12 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
python实现下载文件的三种方法
2017/02/09 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
如何通过命令行进入python
2020/07/06 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
医学专业五年以上个人求职信
2013/12/03 职场文书
老师给学生的表扬信
2014/01/17 职场文书
开业庆典答谢词
2014/01/18 职场文书
高中自我评价范文
2014/01/27 职场文书
品牌推广策划方案
2014/05/28 职场文书
体育专业自荐书
2014/05/29 职场文书
企业安全生产标语
2014/06/06 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
电视新闻稿
2015/07/17 职场文书
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL
python脚本框架webpy模板赋值实现
2021/11/20 Python
Win11更新失败并提示0xc1900101
2022/04/19 数码科技