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;
            
		   // 第二种
			state.all.ID = (all.ID == '' || all.ID) ? all.ID : state.all.ID;
			state.all.BrandID = (all.BrandID == '' || all.BrandID) ? all.BrandID : state.all.BrandID;
		
        }
    }
    
    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;
    原文作者:紫菀檀ss
    原文地址: https://blog.csdn.net/LiaoFengJi/article/details/95181156
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞