actions vuex 请求_【前端/Vuex】Vuex在实际项目中的使用

最新推荐文章于 2024-03-29 15:03:02 发布

cstghitpku

最新推荐文章于 2024-03-29 15:03:02 发布

阅读量120

点赞数

文章标签： actions vuex 请求

本文链接：https://blog.csdn.net/weixin_33198642/article/details/112216696

版权

结合我近期做的一个小项目来介绍一下Vuex的使用！ --2020.12.29

Vuex的基本概念

01-1 Vuex的基本介绍

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

图1 Vue调试工具

简单理解：Vuex就是不同组件共享的一个数据仓库，每个组件都可以读取其中储存的数据，同时也可以进行相关操作来改变其中的数据，从而根据数据的改变来进行视图层的动态更新。

注意：组件的销毁不会改变Vuex中的数据。

使用场景：例如用户登录状态、音乐播放状态、购物车商品等

01-2 Vuex的运作流程

以下是官方给出的流程图：

图2 Vuex运作流程图

从图中可以看到主要有四个部分，分别是Vue组件、Actions、Mutations、State，这几个部分作用如下：

Vue组件：即我们应用中的各部分组件;
State：存储Vuex中的数据状态;
Mutations：对State中的数据状态进行更改，只能是同步操作;
Actions：提交Mutations，可包含异步操作;

这几个部分之间的操作逻辑接地气一点来表述大概就是：

Vue组件中某些操作来调用Actions里面的方法(同时传给它需要的参数)，或者直接调用Mutations(同时传给它需要的参数)；
Actions获得参数后提交Mutations (同时传给它需要的参数)；
Mutations获得参数后再来更改State中的数据状态；
State中数据变化会动态更新相应的组件视图；
完成一次Vuex更新；

Vuex在项目中的使用

02-1 Vuex的使用流程及相关文件

安装Vuex

这个就不说了，直接在项目根目录下执行：

npm install vuex --save

创建Vuex的相关项目文件

图3 Vuex的文件结构

其实只有一个index.js也是可以的，这里分开来这么几个部分是为了方便维护管理。下面分文件介绍一下：

index.js--store实例的主要结构

//导入需要的插件
import Vue from 'vue'
import Vuex from 'vuex'
//导入分开的各个模块
import state from "./state"
import mutations from "./mutations"
import actions from "./actions"
// 1、使用Vuex插件
Vue.use(Vuex)
// 2、创建Store对象，并注册相应模块
const store = new Vuex.Store({
  state,
  mutations,
  actions,
})
// 3、导出store对象,并在main.js的Vue实例下注册
export default store

//这下面是main.js的相应内容
import store from './store'
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

state.js--数据状态仓库

//开始保存这些公共状态的初始值
export default {
  loginStatus: false,
  userInfo: {},
  userId: 2,
  listInfo: [],
};

mutation-types.js--常量替代mutation事件类型,可理解为把Mutations中的事件名定义为常量

//使用常量替代mutation事件类型在各种Flux实现中是很常见的模式(官网)
export const UPDATE_LOGIN_STATUS = 'UPDATE_LOGIN_STATUS';
export const USER = 'USER';
export const USERID = 'USERID';
export const LIST_INFO = 'LIST_INFO';

mutations.js--根据actions传入的参数更改state中数据状态

//这个语法是把上面这个文件里的全部常量批量导入
import * as Types from './mutation-types';
export default {
  [Types.UPDATE_LOGIN_STATUS](state, payload) {
    state.loginStatus = payload;
  },
  [Types.USER](state, payload) {
    state.userInfo = payload;
  },
  [Types.USERID](state, payload) {
    state.userId = payload;
  },
  [Types.LIST_INFO](state, payload) {
    state.listInfo = payload;
  },
}

actions.js--在组件中调用来提交Mutations，关于actions里的异步操作我目前还是比较糊涂

//同上
import * as Types from './mutation-types';
export default {
  //获取用户登录信息
  getLoginInfo({
    commit
  }, userInfo) {
    commit(Types.UPDATE_LOGIN_STATUS, true);
    commit(Types.USER, userInfo)
  },
  //获取用户ID
  getUserId({
    commit
  }, uid) {
    commit(Types.USERID, uid);
  },
  //退出登录
  getLoginOut({
    commit
  }) {
    //登录状态改为false
    commit(Types.UPDATE_LOGIN_STATUS, false);
    //同时重置Vuex中用户歌单信息以及用户ID
    commit(Types.LIST_INFO, []);
    commit(Types.USERID, 2);
  },
  //获取用户歌单
  getListInfo({
    commit
  }, listInfo) {
    commit(Types.LIST_INFO, listInfo);
  },
}

以上为Vuex的相关状态管理文件，下面看如何在具体的组件中使用。

02-2 Vuex在具体组件中的使用

首先大概说一下登录功能实现逻辑：

点击登录按钮，弹出登录框;
输入账号密码，点击登录，根据相应接口发送网络请求：如果成功则获取用户信息以及用户歌单信息，失败则弹出提示框;
请求成功则Vuex中会存储正确的状态信息，相关组件会实时动态更新;
另外在设置组件里面点击退出登录则又会调用退出登录的action，实现退出登录;

登录组件(login.vue)

template部分

<div class="login"><div class="container"><div class="title">登录界面div><div class="phone info"><div class="incontainer"><div class="text">手机:div><input type="text" placeholder="请输入手机" class="count" v-model="tel" autofocus>div>div><div class="password info"><div class="incontainer"><div class="text">密码:div><input type="password" placeholder="请输入密码" class="count" v-model="pwd">div>div><div class="icon iconfont" @click="closeLogin">div><div class="btns"><button class="btnl btn" @click="cleanInput">清空button><button class="btnr btn" @click="tryToLogin">登录button>div><div class="windowf"><div class="window" v-if="isShow">账号或密码有误！div>div>div>div>template>

script部分