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 相关文章推荐
基于jQuery的试卷自动排版系统实现代码
Jan 06 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
原生js实现弹出层效果
Jan 20 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
vue+ts下对axios的封装实现
Feb 18 Javascript
小程序使用分包的示例代码
Mar 23 Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
关于Js中new操作符的作用详解
Feb 21 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
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
超级强大的表单验证
2006/06/26 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
js常见遍历操作小结
2019/06/06 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
简单的Python2.7编程初学经验总结
2015/04/01 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
椰子猫砂:CatSpot
2018/08/27 全球购物
实习教师自我鉴定
2013/09/27 职场文书
社团文化节策划书
2014/02/01 职场文书
优秀老师事迹材料
2014/02/05 职场文书
网络编辑岗位职责
2014/03/18 职场文书
产品售后服务承诺书
2014/05/21 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
铅球加油稿100字
2014/09/26 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
运动会闭幕式致辞
2015/07/29 职场文书