vue-vuexにデータを格納し、vuexからデータを取り出します.

1533 ワード

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;