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实现的省市区级联无ajax
Sep 24 Javascript
JavaScript用select实现日期控件
Jul 17 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
详谈javascript异步编程
Feb 21 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 Javascript
详解如何探测小程序返回到webview页面
May 14 Javascript
nginx部署多个vue项目的方法示例
Sep 06 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实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
vue组件实例解析
2017/01/10 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
python操作oracle的完整教程分享
2018/01/30 Python
Python标准库shutil用法实例详解
2018/08/13 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
Python绘制股票移动均线的实例
2019/08/24 Python
python中栈的原理及实现方法示例
2019/11/27 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
单位在职证明范本
2014/01/09 职场文书
小学三年级学生评语
2014/04/22 职场文书
办理房产过户的委托书
2014/09/14 职场文书
初中军训感言
2015/08/01 职场文书
会计实训总结范文
2015/08/03 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
导游词之潮音寺
2019/09/26 职场文书
用python画城市轮播地图
2021/05/28 Python
golang实现浏览器导出excel文件功能
2022/03/25 Golang