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 相关文章推荐
utf8的编码算法 转载
Dec 27 Javascript
js和as的稳定传值问题解决
Jul 14 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
vue fetch中的.then()的正确使用方法
Apr 17 Javascript
js实现简单的随机点名器
Sep 17 Javascript
javascript实现点击小图显示大图
Nov 29 Javascript
vue实现锚点定位功能
Jun 29 Vue.js
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去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
pycharm 使用心得(三)Hello world!
2014/06/05 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
Django分页功能的实现代码详解
2019/07/29 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
高考自主招生自荐信
2013/10/20 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书