网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2024/5/9 浏览:3 次 )

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 "htmlcode">
  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中取出数据就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

上一篇:Vuex中实现数据状态查询与更改
下一篇:vue.js的简单自动求和计算实例
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网