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>