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 22 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
一次让你了解全部JavaScript的作用域
Jun 24 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
javascript+Canvas实现画板功能
Jun 23 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 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
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
PHP中文件缓存转内存缓存的方法
2011/12/06 PHP
PHP读取文件并可支持远程文件的代码分享
2012/10/03 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
js实现搜索栏效果
2018/11/16 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
Ajax和javascript的区别
2013/07/20 面试题
销售员自我评价怎么写
2013/09/19 职场文书
大学生活动总结模板
2014/07/02 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
新学期主题班会
2015/08/17 职场文书