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 相关文章推荐
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 Javascript
jQuery拖动图片删除示例
May 10 Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
JavaScript实现SHA-1加密算法的方法
Mar 11 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
jQuery中库的引用方法
Jan 06 jQuery
Vue插件打包与发布的方法示例
Aug 20 Javascript
vue 搭建后台系统模块化开发详解
May 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
url decode problem 解决方法
2011/12/26 PHP
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
php页面函数设置超时限制的方法
2014/12/01 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
python进程管理工具supervisor使用实例
2014/09/17 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
英语专业个人求职自荐信
2013/09/21 职场文书
手术室护士自我鉴定
2013/10/14 职场文书
成人大专自我鉴定范文
2013/10/19 职场文书
传媒专业推荐信范文
2013/11/23 职场文书
大学生创业项目方案
2014/03/08 职场文书
党员志愿者活动总结
2014/06/26 职场文书
社区助残日活动总结
2014/08/29 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
黄埔军校观后感
2015/06/10 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python