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获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
jQuery基础知识filter()和find()实例说明
Jul 06 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
Vue 全局loading组件实例详解
May 29 Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 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
无线电广播的开始
2002/01/30 无线电
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
php db类库进行数据库操作
2009/03/19 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
Python中的元类编程入门指引
2015/04/15 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
python实现输入数字的连续加减方法
2018/06/22 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
python scipy卷积运算的实现方法
2019/09/16 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
YUV转为jpg图像的实现
2019/12/09 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
学习2014年全国两会心得体会
2014/03/12 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
升学宴来宾致辞
2015/07/27 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers