Vuex是什么？
Vuex是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是：应用遇到多个组件共享状态时，使用vuex。
应用场景以及流程
- 多个组件共享数据或者是跨组件传递数据时。
- 页面通过mapAction异步提交事件到action，action通过commit把对应参数同步提交到mutation，mutation会修改state中对应的值。最后通过getter把对应值跑出去，在页面的计算属性中，通过mapGetter来动态获取state中的值。
属性
- state：vuex的基本数据，用来存储变量
- geeter：从基本数据(state)派生的数据，相当于state的计算属性
- mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
- action：和mutation的功能大致相同，不同之处在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
- modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
安装
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>
效果如下：
文章知识点与官方知识档案匹配，可进一步学习相关知识
