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 相关文章推荐
根据json字符串生成Html的一种方式
Jan 09 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
JavaScript操作select元素和option的实例代码
Jan 29 Javascript
javascript实现的左右无缝滚动效果
Sep 19 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
Vue登录主页动态背景短视频制作
Sep 21 Javascript
JavaScript数组排序小程序实现解析
Jan 13 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 flock 文件锁详细介绍
2012/12/29 PHP
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
使用Composer安装Yii框架的方法
2016/03/15 PHP
php事件驱动化设计详解
2016/11/10 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
Exjs 入门篇
2010/04/07 Javascript
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
js Dialog 实践分享
2012/10/22 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
js实现旋转木马效果
2017/03/17 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
Python实现的计数排序算法示例
2017/11/29 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
python温度转换华氏温度实现代码
2020/12/06 Python
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
工程班组长岗位职责
2013/12/30 职场文书
法人代表证明书格式
2014/10/01 职场文书
2015银行年终工作总结范文
2015/05/26 职场文书
研讨会致辞
2015/07/31 职场文书
python flask框架快速入门
2021/05/14 Python
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL