vue 将数据保存到vuex中

在项目中遇到这样一个问题，就是在登入的时候同时需要从后台获取到左边的导航，但是如果使用h5的localStorage来保存导航信息，会出现app加载进去之后localStorage才保存进浏览器，在mounted方法中，console.log(window.localStorage.getItem('xx')打印出来是undefined，于是把数据保存到vuex中管理，以下是把数据保存到vuex中的例子（转载，来源参考https://www.cnblogs.com/jasonwang2y60/p/6606822.html）

在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话，有必要考虑引入ｖｕｅｘ来管理这些凌乱的状态，今天这边博文用来记录这一整个的过程，后台api接口是使用webpack-server模拟的接口，这个前面的文章中有提到，需要的可以去翻阅。

整个的流程是在组件的created中提交dispatch然后通过action调用一个封装好的axios然后再触发nutation来提交状态改变state中的数据，然后在组件的计算属性中获取state的数据并渲染在页面上

首先新需要在项目中安装vuex：

运行命令　npm install vuex --save-dev

在项目的入口js文件main.js中

import store from './store/index'

并将store挂载到vue上

new Vue({el: '#app',router,store,template: '<App/>',render: (createElement) => createElement(App)
})

然后看下整个store的目录结构，modules文件夹用来将不同功能也面的状态分成模块，index.js文件夹是store的入口文件，types文件夹是定义常量mutation的文件夹

整个vuex的目录结构如下：

这里我新建了文件夹fetch用来编写所有的axios处理和axios封装

在fetch文件夹下新建api.js文件：

import axios from 'axios'export function fetch(url, params) {return new Promise((resolve, reject) => {axios.post(url, params).then(response => {alert('Api--ok');resolve(response.data);}).catch((error) => {console.log(error)reject(error)})})
}export default {// 获取我的页面的后台数据
  mineBaseMsgApi() {alert('进入api.js')return fetch('/api/getBoardList');}
}

在store的入口文件index.js中：

import Vue from 'vue'
import Vuex from 'vuex'import mine from './modules/mine';Vue.use(Vuex);export default new Vuex.Store({modules: {mine}
});

在你需要请求后台数据并想使用vuex的组件中的created分发第一个dispatch：

created() {this.$store.dispatch('getMineBaseApi');}

然后在store／modules下的对应模块js文件中，这里我使用的mine.js文件中编写state、action和mutation

import api from './../../fetch/api';
import * as types from './../types.js';const state = {getMineBaseMsg: {errno: 1,msg: {}}
}const actions = {getMineBaseApi({commit}) {alert('进入action');api.mineBaseMsgApi().then(res => {alert('action中调用封装后的axios成功');console.log('action中调用封装后的axios成功')commit(types.GET_BASE_API, res)})}
}const getters = {getMineBaseMsg: state => state.getMineBaseMsg
}const mutations = {[types.GET_BASE_API](state, res) {alert('进入mutation');state.getMineBaseMsg = { ...state.getMineBaseMsg, msg: res.data.msg }alert('进入mutations修改state成功');}
}export default {state,actions,getters,mutations
}

然后在想取回state的组件中使用mapGetters获取state：

import { mapGetters } from 'vuex';export default {．．．computed: {...mapGetters(['getMineBaseMsg'])}，．．．
｝

然后在控制台查看把：

getters和mutation都已经成功了，同时我在提交state的整个过程都添加了alert，大家可以看看整个流程是如何走的；

转载于:https://www.cnblogs.com/catbrother/p/9386919.html

vue 将数据保存到vuex中相关推荐

调用API接口登录后，获取用户信息保存到Vuex中并渲染到Vue页面
文件封装步骤核心请求文件在 apiUse 文件夹中的 index.js 文件写 API接口方法 baseURL + url 后台完整地址将信息写入 store 文件夹中的 index.js 文 ...
Arduino ESP32将数据保存到NVS中
Arduino ESP32将数据保存到NVS中该功能类似AVR单片机里面的EEPROM存储区域. 关于ESP32分区表参考<分区表> Preferences中数据以键值对(key - v ...
【Arduino串口数据保存到excel中常用三种方法】
[Arduino串口数据保存到excel中常用三种方法] 1. 前言 2. 利用excel自带Data Streamer读取 2.1 启用 Data Streamer 加载项 2.2 刷写代码并将微控 ...
Redis使用场景一，查询出的数据保存到Redis中，下次查询的时候直接从Redis中拿到数据。不用和数据库进行交互。...
maven使用: <dependency><groupId>redis.clients</groupId><ar ...
一篇文章让你轻松学会python爬取的数据保存到MySQL中,有案例哦
文章目录 pymysql 基本使用八个步骤以及案例分析一.导入pymysql模块二.获取到database的链接对象三.创建数据表的方法四.获取执行sql语句的光标对象五.定义要执行的sq ...
Python爬虫数据保存到MongoDB中
MongoDB是一款由C++语言编写的非关系型数据库,是一个基于分布式文件存储的开源数据库系统,其内容存储方式类似于JSON对象,它的字段值可以是其它文档或数组,但其数据类型只能是String文本型. ...
Python xlwt数据保存到 Excel中以及xlrd读取excel文件画图
1.方法一:xlwt 1.1 安装包 pip install xlwt 1.2 保存数据到 Excel import xlwt import numpy as np import random # 新 ...
Python将数据保存到CSV中/with open() as f 用法
常见的读写操作: with open(r'filename.txt') as f: data_user=pd.read_csv(f) #文件的读操作 with open('data.txt', ...
把数据保存到cook_将用户信息保存到Cookie中
/** * 把用户保存到Cookie * * @param request * @param response * @param member */ private void rememberPwdA ...

vue 将数据保存到vuex中

vue 将数据保存到vuex中相关推荐

最新文章

热门文章