更新时间:2022-10-01 09:28:43
Vuex是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是:应用遇到多个组件共享状态时,使用vuex。
多个组件共享数据或者是跨组件传递数据时。
页面通过mapAction异步提交事件到action,action通过commit把对应参数同步提交到mutation,mutation会修改state中对应的值。最后通过getter把对应值跑出去,在页面的计算属性中,通过mapGetter来动态获取state中的值。
npm install vuex --save
在src下新建vuex文件夹,在vuex文件夹下新建store.js并引入、注册vuex。
//引入 import Vue from 'vue' import Vuex from 'vuex' //注册 Vue.use(Vuex) const store = new Vuex.Store({ modules:{ } }); export default store;
在vuex文件夹下新建user.js并进行相关配置,同时再将上面配置好的store.js再进行修改。
user.js
const user = { state:{ user:"", password:"" }, mutations:{ USER_INFO(state,data){ state.user = data }, USER_INFO_PWD(state,data){ state.password = data } }, actions:{ saveUserInfo({ commit },data){ commit('USER_INFO',data) }, saveUserPwd({ commit },data){ commit('USER_INFO_PWD',data) } }, getters:{ getName:(state)=>state.user, getPwd:(state)=>state.password } }; export default user
store.js
//引入 import Vue from 'vue' import Vuex from 'vuex' import user from './api/user' //注册 Vue.use(Vuex) const store = new Vuex.Store({ modules:{ user } }); export default store;
main.js
import Vue from 'vue' import App from './App' import router from './router' import store from './vuex/store' /* eslint-disable no-new */ new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' })
Login.vue(关键代码)
this.axios.post('接口', { userId: _this.loginForm.userId, passWord: _this.loginForm.passWord }).then(response => { if (response.data.length) { //请求回来后,把用户信息存储到VUEX里 this.$store.dispatch('saveUserInfo', response.data[0].userId); this.$store.dispatch('saveUserPwd', response.data[0].passWord); //页面跳转 this.$router.push("/Home"); this.$message({ message: '恭喜你,登录成功', type: 'success' }); } else { this.$message.error('请检查用户名或密码'); } })
Home.vue
<template> <a>{{Name}}</a> </template> import { mapGetters } from 'vuex' export default { data() { return { }; }, computed: { Name() { return this.$store.getters.getName; } }, mounted() { //在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store")) { this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem("store"))) } //在页面刷新时将vuex里的信息保存到sessionStorage里 window.addEventListener("beforeunload", () => { sessionStorage.setItem("store", JSON.stringify(this.$store.state)) }) } } }; </script>