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优化技巧(文件瘦身篇)
Jan 28 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
Javascript中的数组常用方法解析
Jun 17 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
JS实现碰撞检测的方法分析
Jan 19 Javascript
Node爬取大批量文件的方法示例
Jun 28 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 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
如何使用脚本模仿登陆过程
2006/11/22 PHP
php编写一个简单的路由类
2011/04/13 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
jquery 插件 人性化的消息显示
2008/01/21 Javascript
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
2013/12/31 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
详解package.json版本号规则
2019/08/01 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
[10:28]2018DOTA2国际邀请赛寻真——VGJ.S寻梦之路
2018/08/15 DOTA
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
Python使用gRPC传输协议教程
2018/10/16 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
浅析python标准库中的glob
2020/03/13 Python
python实现IOU计算案例
2020/04/12 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
理工学院学生自我鉴定
2014/02/23 职场文书
节约用水倡议书
2014/04/16 职场文书
法院授权委托书范文
2014/08/02 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
使用Pytorch训练two-head网络的操作
2021/05/28 Python
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL