vue - 将数据存入vuex中以及从vuex中取出数据

曾经终败给现在 2021-09-29 09:36 1238阅读 0赞

#### 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;