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 相关文章推荐
百度移动版的url编码解码示例
Apr 29 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
小程序实现列表删除功能
Oct 30 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 Javascript
Node.js API详解之 util模块用法实例分析
May 09 Javascript
关于Vue中$refs的探索浅析
Nov 05 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的图形函数中显示汉字
2006/10/09 PHP
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
[42:32]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第二场 10.28
2020/10/28 DOTA
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
Python列表对象实现原理详解
2019/07/01 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
车间班长岗位职责
2013/11/30 职场文书
演讲稿怎么写才完美
2014/01/02 职场文书
实习单位接收函
2014/01/11 职场文书
庆八一活动方案
2014/01/25 职场文书
党员批评与自我批评
2014/10/15 职场文书
2014年保密工作总结
2014/11/22 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书