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

  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;

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

时间: 2019-11-08

vue通过cookie获取用户登录信息的思路详解

思路 进入页面 若未登录,跳转至登陆页面 若已登录,从cookie中获取用户信息,并执行后续操作 2. 登录页面,存入cookie(setCookie) import {setCookie,getCookie}from 'src/js/cookieUtil' methods: { async cheack_n_p () { if( this.checkCode === this.pwd) { this.loginData = await getUserInfo(this.uname, this.

VUE:vuex 用户登录信息的数据写入与获取方式

整体思路: 前台获取用户数据,向后台发送post请求,验证成功后 前台接受数据,改变用户登录状态 将登录状态及用户数据写入到state中 这样多个页面就可以直接使用this.$store.getters.getuname调用state中的用户信息 1. 向后台发送请求,若成功返回用户名,密码,使用 this.$store.dispatch('setLogin', true);将数据写入到state中 页面:login.vue 代码: this.loginData = await getUserI

使用vuex存储用户信息到localStorage的实例

1.首先需要装vuex npm install vuex -d 2.新建store文件夹,新建index.js, 并引入vue.vuex,代码如下: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const key = 'user' const store = new Vuex.Store({ state () { return { user: null } }, getters: { getStorage: functi

Vue项目使用localStorage+Vuex保存用户登录信息

本文实例为大家分享了Vue使用localStorage+Vuex保存用户登录信息的具体代码,供大家参考,具体内容如下 api.js import axios from 'axios' const baseURL = 'http://XXX // 全局的 axios 默认值 axios.defaults.baseURL = baseURL // 登录请求 const loginCheck = params => { return axios.post('/login', params).then(

详解Vuex管理登录状态

又仔细看了一遍vuex的文档,还是云里雾里的,不过至少明白它是一个专门管理状态的,根据数据状态的改变可以驱动视图更新,既然是这样那至少登录注册是一种状态,就用登录来做测试,学习vuex,不过话说回来,既然专门管理状态,那我至少要仔细推敲一下这个learn的学习项目有那些状态逻辑. 1.据说储存的vuex store里面的状态是临时的,右键刷新一下页面这些状态就销毁了(这是据说,请大神解惑我也没办法证实),如果是这样的话,我的用户状态user还是应该要写入sessionStorage,不然登录了的

uni-app微信小程序登录并使用vuex存储登录状态的思路详解

微信小程序注册登录思路 (这是根据自身的项目的思路,不一定每个项目都适用) 1.制作授权登录框,引导用户点击按钮 2.uni.login获取code 3.把code传给后端接口,后端返回如下数据 openid: "ogtVM5RWdfadfasdfadfadV5s" status: 1 // 状态码:status==0(该用户未注册,需调用注册接口) status==1(该用户已注册) 4.判断用户是否注册,并调用用户信息接口 (1)若已注册则提示登录成功,并调用后台给的获取用户信息的

详解vuex的简单使用

1 目录的配置 根据官方推荐在src目录里面创建store目录 2 创建store里面的文件 根据官方推荐创建 actions.js, getters.js,index.js, mutations.js, mutations-types.js, state.js 2.1 state.js state.js: 是vuex的单一状态数,用一个对象就包含了全部的应用层级状态.至此它便作为一个『唯一数据源(SSOT)』而存在.这也意味着,每个应用将仅仅包含一个 store 实例.单一状态树让我们能够直接

vuex实现登录状态的存储,未登录状态不允许浏览的方法

基础思路就是使用vuex状态管理来存储登录状态(其实就是存一个值,例如token),然后在路由跳转前进行登录状态的判断,可以使用vue-router的全局前置守卫beforeEach,也可以使用路由独享的守卫beforeEnter. 导航守卫 正如其名,vue-router``` 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的. 记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察 $route 对象来应对

详解SQL Server数据库状态和文件状态

数据库状态 (database states) 查询数据库的当前状态 : 1.查询所有数据库的状态 ,通过sys.databases目录视图的state_desc列 user master go select state_desc ,[name] from sys.databases go 2.查询指定数据库的状态,通过DATABASEPROPERTYEX函数的Status属性 select DATABASEPROPERTYEX('demoData','status') go 状态: ONLIN

详解vuex中mapState,mapGetters,mapMutations,mapActions的作用

在开始接触vuex框架的时候对那些state,action,mutation,getter等理解的还挺顺利的,然后突然出来一种加了一个前缀的mapState等,这样的就有点蒙圈了...特别是官方的文档并没有给除详细的说明跟例子...然后就自己慢慢理解了一下.其实也就是一个重命名而已...以下就是例子,希望能帮助理解: 在store中代码 import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex); const store = new V

详解linux SSH登录流程

本文给大家详细介绍了ssh 密钥登录远程服务器流程和注意事项,以下是详细内容: 密钥登录比密码登录安全,主要是因为他使用了非对称加密,登录过程中需要用到密钥对.整个登录流程如下: 远程服务器持有公钥,当有用户进行登录,服务器就会随机生成一串字符串,然后发送给正在进行登录的用户. 用户收到远程服务器发来的字符串,使用与远程服务器公钥配对的私钥对字符串进行加密,再发送给远程服务器. 服务器使用公钥对用户发来的加密字符串进行解密,得到的解密字符串如果与第一步中发送给客户端的随机字符串一样,那么判断为登

详解Python用户登录接口的方法

Readme: blog address: 摘要:编写登录接口 输入用户名.密码 认证成功后显示欢迎信息 输错3次后锁定 关键词:循环:判断:外部数据读写:列表:字典: 展望:可以结合数据库读写. codes: # Author: Steven Zeng ''' 作业2:编写登录接口 输入用户名密码 认证成功后显示欢迎信息 输错3次后锁定 ''' print("welcome to here") f1=open('username.txt') f2=open('password.txt

详解vuex之store拆分即多模块状态管理(modules)篇

了解vuex的朋友都知道它是vue用来集中管理状态的容器,如果了解过Reduce的朋友可能看见他时就会非常熟悉,都是用来管理全局的状态的,实现不同组件之间相互的数据访问.这里我们不介绍vuex,主要介绍vuex拆分store以及多模块管理.我们知道如果一个项目非常大的话状态就会非常的多,如果不进行分类处理,所有的状态都维护在一个state里面的话,状态管理就会变得非常的混乱,这样非常不利于项目的后期维护.我们现在前端推崇模块化开发,为的就是提高开发效率和维护效率,避免重复工作.那么vuex是怎么

详解vuex状态管理模式

一.前言 本次接受一个BI系统,要求是能够接入数据源-得到数据集-对数据集进行处理-展现为数据的可视化,这一个系统为了接入公司自身的产品,后端技术采用spring boot,前端采用vue+vuex+axios的项目架构方式,vuex作为vue的状态管理,是尤为重要的部分.这里,我将vuex如何运作和使用做一次总结,有错的地方,望多多提点. 二.vuex简单使用 安装vuex cnpm install vuex --save 在src目录下建立文件夹,命名为store,建立index.js 如图