vuex使用小小谈

最新推荐文章于 2023-07-17 17:44:50 发布

小憨憨不敢啊

最新推荐文章于 2023-07-17 17:44:50 发布

阅读量225

点赞数

分类专栏： vue 文章标签：前端 vue

本文链接：https://blog.csdn.net/qq_45414633/article/details/109512097

版权

vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1.vuex简要说明
vuex是专门为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。也就是说他的作用就是将应用中的所有状态都放在一起，集中式来管理。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。了解vue的同学应该是明白data是怎么回事的吧，如果不懂的话，建议先看看vue的基础知识再看vuex。

2. vuex的组成结构示意图
vuex的特点是把数据单独隔离，形成一棵树状图。单独隔离就意味着它有自己的生态系统。输入和输出，其中action作为数据的输入，state作为数据的输出。如下图：
在这里插入图片描述

vuex中规定：只能在mutaions里修改state，actions不能直接修改state；mutaions即变化，则修改state中的数据，这个过程是同步的，不能存在异步操作。需要异步操作的话将异步操作放在action中，在拿到数据后通过mutaions同步处理，其实vuex的职权划分比较明确。

3.vuex中的核心 ：state，getter，mutaions，actions,module

1>. vuex 中最关键的是store对象，这是vuex的核心(每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state))。可以说，vuex这个插件其实就是一个store对象，每个vue应用仅且仅有一个store对象。
store是Vuex.Store这个构造函数new出来的实例。在构造函数中可以传一个对象参数。这个参数中可以包含5个对象：

1.state – 存放状态

2.getters – state的计算属性

3.mutations – 更改状态的逻辑，同步操作

4.actions – 提交mutation，异步操作

5.mudules – 将store模块化

关于store，需要先记住两点：
1.store 中存储的状态是响应式的，当组件从store中读取状态时，如果store中的状态发生了改变，那么相应的组件也会得到更新；

2.不能直接改变store中的状态。改变store中的状态的唯一途径是提交(commit)mutations。这样使得我们可以方便地跟踪每一个状态的变化。

一个完整的store结构是这样的：

const store = new Vuex.Store({
  state: {
    // 存放状态
  },
  getters: {
    // state的计算属性
  },
  mutations: {
    // 更改state中状态的逻辑，同步操作
  },
  actions: {
    // 提交mutation，异步操作
  },
  // 如果将store分成一个个的模块的话，则需要用到modules。
   //然后在每一个module中写state, getters, mutations, actions等。
  modules: {
    a: moduleA,
    b: moduleB,
    // ...
  }
});

也是初次使用vuex，我的理解比较浅显，可以去官方文档中具体了解vuex这部分知识
https://www.cnblogs.com/guiyishanren/p/10657910.html

注：在vue的单页面应用中使用，需要使用vue.use(vuex)调用插件，将其注入到vue根实例中。

现贴出我的代码进行说明，前提是需要在main.js中全局注入：

import Vuex from 'vuex'
import store from './vuex/store'

位置：vuex/store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 应用初始状态
const state = {
  //菜单和路由是否加载
  menuRouteLoaded: false,
  //存放token
  token: "",
  //存放登录用户信息
  user: {}
}

// 定义所需的 mutations
const mutations = {
  //修改token
  changeToken(state, token) {
    state.token = token
  },
  //修改用户登录信息
  changeUser(state, user) {
    state.user = user
  },
  //数据处理的方法
  menuRouteLoaded(state, menuRouteLoaded) {
    state.menuRouteLoaded = menuRouteLoaded;
  }
}

const getters = {
  //数据包装
}

// 创建 store 实例
export default new Vuex.Store({
  state,
  mutations,
  getters
})

可以看到在我的store.js文件中，state中定义了token，user两个数据变量（主要操作这两部分数据）,在我的mutations同步方法中对这两部分数据进行实时更改。方法体的执行代码我放在了登录页面进行调用，代码如下：
页面注入：

import { mapMutations } from "vuex";

在method方法中定义：
在这里插入图片描述

方法体内执行：

loginBtn(e) {
			this.$refs.formInfo.validate((valid) => {
				if (valid) {
					this.logining = true;
					var loginParams = {
						username: this.formInfo.account,
						userword: this.formInfo.checkPass,
						authcode: this.formInfo.yzcode,
						codeguid: this.formInfo.codeGuid,
						appid: this.formInfo.appid,
					};
					requestLogin(loginParams).then((response) => {
						this.logining = false;
						if (response == undefined || response.code != 200) {
							this.getInfo();
							return false;
						} else {
							// sessionStorage.setItem("user", JSON.stringify(response.data));
							// sessionStorage.setItem("token", response.data.token);
							// sessionStorage.removeItem("guid");
							this.changeToken(response.data.token);
							this.changeUser(response.data);
							this.$router.push({ path: "/main" });
						}
					});
				} else {
					return false;
				}
			});
		},
	},

在这里谈谈vuex中的辅助函数mapMutations，mapMutations是vuex的mutation的辅助函数，用于在组件中映射mutation的方法，说白了就是语法糖。
应用步骤：

在组件中导入vuex中的mapMutations：import { mapMutations } from "vuex";
在组件中导入mutation里的方法名：

...mapMutations(["changeToken", "changeUser"]),   //使用es6的拓展运算符，约定将mutation里的方法名为大写，并且导入时要给其加上引号

方法调用，在有参数的情况下，mutation的state默认参数可以省略，如： this.changeUser(response.data);

至此我的代码就结束了。

其实我在这里运用vuex的作用本身是为了替换sessionstory等等，因为在浏览器中的application会将其内容暴露出去，但是vuex本身机制是页面刷新会将值重置，解决办法是将vuex中的变量存在cookie中或者是xml文件中，我打算将sessionstory进行加密处理~~~