vue事件总线是Vue的单独实例。Vuex是一个（基于磁通）状态管理库，它与Vue的当前实例集成，并添加了许多功能。
一、 事件总线
事件总线主要用于解决非父子组件之间的传值
1.在main.js中注册全局的bus
Vue.prototype.$bus=new Vue();
然后在组件中，可以使用$emit，$on，$off 分别来派发、监听、取消监听事件.
- 使用
派发事件的组件
methods: {
todo: function () {
this.$bus.$emit('todoSth', params); //params是传递过去的参数
}
}
监听的组件
created() {
this.$bus.$on('todoSth', (params) => {
//获取传递过来的参数并进行操作
//todo something
})
},
// 最好在组件销毁前
// 清除事件监听
beforeDestroy () {
this.$bus.$off('todoSth');
},
如果需要监听多个组件，只需要更改 bus 的 eventName，接受参数时做不同的处理:
created() {
this.$bus.$on('firstEvent', this.firstParams);
this.$bus.$on('secondEvent', this.secondParams);
},
// 清除事件监听
beforeDestroy () {
this.$bus.$off('firstEvent', this.firstParams);
this.$bus.$off('secondEvent', this.secondParams);
},
二、vuex
安装
npm install vuex --save使用
创建文件
在src文件夹下新增store文件夹并创建对应文件如图
在main.js中引入使用
import store from './store/index.js'
new Vue({
router,
store, //此处使用
render: h => h(App)
}).$mount('#app')
Eg：使用vuex+session保存用户登录状态
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters'
import * as mutations from './mutations'
import * as actions from './actions'
Vue.use(Vuex);
export default new Vuex.Store({
//定义状态
state:{
currentUser:null, //当前用户
isLogin:false //判断当前用户是否已经登录
},
getters,
mutations,
actions
});
store/getter.js
export const currentUser = state=> state.currentUser
export const isLogin = state=> state.isLogin
mutations.js
//更改用户状态信息
export const userStatus=(state,user)=>{
if (user){
state.currentUser = user
state.isLogin = true
}else if(user==null){
//退出的时候清空sessionStorage里的东西
sessionStorage.setItem('userName',null);
sessionStorage.setItem('userToke','');
state.currentUser = null;
state.isLogin = false;
}
}
actions.js
//应用mutation
export const setUser = ({commit},user) =>{
commit('userStatus',user)
}
在用户登录的时候，我们就需要将用户名存放入sessionStorge，再由sessionStorage传入vuex中
axios.post(url,{USERNAME:this.name,PASSWORD:this.password})
.then((res)=>{
let code = res.data.code
if(code==200){
this.$Message.success('登录成功');
this.$router.push("/home");
//将用户名放入sessionStorage
sessionStorage.setItem('userName',this.name);
//将用户名放入vuex
this.$store.dispatch('setUser',this.name);
}else {
this.$Message.error('账号或密码不正确');
}
}).catch(()=>{
this.$Message.error('获取失败');
})
在页面中获取展示
<div>
<h4>{{this.$store.state.currentUser}}</h4>
</div>
每当刷新页面的时候，就会从sessionStorage中查询是否有userName的存在,如果没有则跳向登录页面
methods:{
isLogo() {
if (sessionStorage.getItem('userName')) {
this.$store.commit('userStatus',sessionStorage.getItem('userName'))
}else{
this.$router.push("/logo");
}
}
}
————————————————
以上参考原文链接：https://blog.csdn.net/weixin_41997724/article/details/86645470
三、vuex和存sessionStorage / localStorage的区别
最重要的区别：vuex存储在内存，localstorage则以文件的方式存储在本地
应用场景：vuex用于组件之间的传值，localstorage则主要用于不同页面之间的传值。
永久性：当刷新页面时vuex存储的值会丢失，localstorage不会。
注：很多人觉得用localstorage可以代替vuex, 对于不变的数据确实可以，但是当两个或多个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage无法做到。比如登录状态是很多组件都需要的，而且当一个组件变时，其他组件需要同时改变，而local/session不是同时改变，需要事件触发里面再取最新状态
