vue实现将数据存入vuex中以及从vuex中取出数据
更新时间：2019年11月08日 09:40:44 作者：紫菀檀ss
今天小编就为大家分享一篇vue实现将数据存入vuex中以及从vuex中取出数据，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
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中取出数据就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了渲染器的工作原理,以及如何将真实dom或者组件用虚拟dom的形式进行描述并渲染,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
本文重点给大家介绍Vue拖拽组件开发实例，拖拽的原理是手指在移动的过程中，实时改变元素的位置即top和left值，使元素随着手指的移动而移动。对实例代码感兴趣的朋友跟随脚本之家小编一起学习吧2018-05-05
关于vue组件的更新机制 resize() callResize()
这篇文章主要介绍了关于vue组件的更新机制 resize() callResize()，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue3文件拖拽上传功能,支持拖拽到此区域上传，支持选择多个文件/文件夹，代码很简单，对vue3拖拽上传功能感兴趣的朋友一起看看吧2022-10-10
这篇文章主要介绍了vue跨域处理方式(vue项目中baseUrl设置问题)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
vue中input type=file上传后@change事件无效的解决方案
这篇文章主要介绍了vue中input type=file上传后@change事件无效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
通过一个对象代理对另一个对象中的属性的操作（读/写），就是数据代理。要搞懂Vue数据代理这个概念，那我们就要从Object.defineProperty()入手，Object.defineProperty()是Vue中比较底层的一个方法，在数据劫持，数据代理以及计算属性等地方都或多或少的用到了本函数2023-01-01
本篇文章主要介绍了详解vue-router基本使用，详细的介绍了vue-router的概念和用法，有兴趣的可以了解一下。2017-04-04
这篇文章主要介绍了基于elementUI实现图片预览组件的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
基于element-ui中el-select下拉框选项过多的优化方案
这篇文章主要介绍了基于element-ui中el-select下拉框选项过多的优化方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最新评论