vue状态管理存取数据_Vue之状态管理(vuex)与接口调用

Vue之状态管理(vuex)与接口调用

一,介绍与需求

1.1,介绍

1,状态管理(vuex)

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

状态管理核心

state里面就是存放项目中需要多组件共享的状态

mutations就是存放更改state里状态的方法

getters就是从state中派生出状态，比如将state中的某个状态进行过滤然后获取新的状态。

actions就是mutation的加强版，它可以通过commit mutations中的方法来改变状态，最重要的是它可以进行异步操作。

modules顾名思义，就是当用这个容器来装这些状态还是显得混乱的时候，我们就可以把容器分成几块，把状态和管理规则分类来装。这和我们创建js模块是一个目的，让代码结构更清晰。

2,axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

从浏览器中创建 XMLHttpRequest

从 node.js 发出 http 请求

支持 Promise API

拦截请求和响应

转换请求和响应数据

取消请求

自动转换JSON数据

客户端支持防止 CSRF/XSRF

axios并没有install 方法，所以是不能使用vue.use()方法的。

解决方法有很多种：

.结合 vue-axios使用

axios 改写为 Vue 的原型属性

使用 vue-axios

在主入口文件main.js中引用

1 import axios from 'axios'

2 import VueAxios from 'vue-axios'

3 Vue.use(VueAxios,axios);

axios 改写为 Vue 的原型属性

在主入口文件main.js中引用

1 import axios from 'axios'

2 Vue.prototype.$axios= axios;

3,vue-resource

vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。

vue-resource还提供了非常有用的inteceptor功能，使用inteceptor可以在请求前和请求后附加一些行为，比如使用inteceptor在ajax请求时显示loading界面。

vue-resource的请求API是按照REST风格设计的，它提供了7种请求API：

get(url, [options])

head(url, [options])

delete(url, [options])

jsonp(url, [options])

post(url, [body], [options])

put(url, [body], [options])

patch(url, [body], [options])

vue-resource不再继续维护，推荐大家使用 axios 。

1.2,需求

如果数据还有其他组件复用，可放在vuex

如果需要跨多级组件传递数据，可放在vuex

需要持久化的数据(如登录后用户的信息)，可放在vuex

跟当前业务组件强相关的数据,可以放在组件内

二,状态数据管理

第一步:在开发环境下安装vuex

1 cnpm install vuex --save-dev

第二步:引用vuex,并实例化vuex状态库

建立一个store文件夹，建立一个index.js。在index.js中引入vue和vuex,日志等

1 import Vue from 'vue'

2 import Vuex from 'vuex'

3

4 //每次修改state都会在控制台打印log

5 import createLogger from 'vuex/dist/logger'

6 Vue.use(Vuex)7

8

9

10 export default newVuex.Store({11 actions:{},12 getters:{},13 state:{},14 mutations:{},15 })

第三步:store文件夹下创建state.js文件

这是我们初始化数据的 ，也是之后我们存数据的地方

1 const state ={2 userInfo: {},3 MenuList: {}4 }5 export default state;

第四步:store文件夹下创建mutations.js文件

提交 mutations 是更改 vuex中 store 中状态的 唯一方法

1 import * as types from './mutation-types'

2 import roleTokencate from "../caches/roleTokencate";3

4 const mutations ={5 /*

6 * 登录7 */

8 [types.SET_USERINFO](state, userInfo) {9 console.log(types.SET_USERINFO, userInfo)10 roleTokencate(userInfo); //存入缓存

11

12 state.userInfo =userInfo13 },14 /*

15 * 获取菜单列表16 */

17 [types.SET_MENULIST](state, data={}) {18 state.MenuList =data19 }20 }21

22 export default mutations

创建mutation-types.js文件,主要类型区分

1 export const SET_USERINFO = "userInfo";//登录返回的用户信息

2 export const SET_MENULIST = "MenuList";//返回的菜单列表

第五步:store文件夹下创建getters.js文件

vue 的计算属性

1 export const userInfo = state =>state.userInfo2 export const MenuList = state => state.MenuList

第六步:store文件夹下创建actions.js文件

Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。

1 import * as types from './mutation-types'

2 import { g