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;

以上这篇vuex 实现数据存入以及数据取出就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

你可能感兴趣的:(javascript,vue.js,前端)