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 相关文章推荐
用YUI做了个标签浏览效果
Feb 20 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 Javascript
Nuxt.js 数据双向绑定的实现
Feb 17 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 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数据采集的详解
2013/06/02 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
JSON 入门指南 想了解json的朋友可以看下
2009/08/26 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
jquery.validate使用详解
2016/06/02 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
简述JS控制台的使用
2018/07/15 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
Python守护线程用法实例
2017/06/23 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
django页面跳转问题及注意事项
2019/07/18 Python
python 日志 logging模块详细解析
2020/03/31 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
如何理解transaction事务的概念
2015/05/27 面试题
求职推荐信
2013/10/28 职场文书
文明班级申报材料
2014/12/24 职场文书
先进单位申报材料
2014/12/25 职场文书
小学中等生评语
2014/12/29 职场文书
医学生自荐信范文
2015/03/05 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
创业计划书之酒店
2019/08/30 职场文书
详解Laravel服务容器的优势
2021/05/29 PHP