[Vue] vuex进行组件间通讯
vue 组件之间数据传输(vuex)
初始化 store
src/main.js
import Vuex from "vuex";
Vue.use(Vuex);
new Vue({
...,
store,
...,
});
src/store/index.js
import mutations from "./mutations";
const initStore = {
state: {
userBasicInfo: {},
siteBaseInfo: {
download: "",
invitation: "",
register_enable: "",
service_qq1: "",
service_qq2: "",
service_wechat: "",
},
},
mutations
};
export default initStore;
src/store/mutations.js
const SET_USER_BASIC_INFO = 'SET_USER_BASIC_INFO';
const SET_SITE_BASE_INFO = 'SET_SITE_BASE_INFO';
export default {
[SET_USER_BASIC_INFO](state, payload) {
state.userBasicInfo = payload.data;
},
[SET_SITE_BASE_INFO](state, payload) {
state.siteBaseInfo = Object.assign({}, state.siteBaseInfo, payload);
},
}
state
正常使用 state
Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态。每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。
Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中。
const app = new Vue({
el: '#app',
// 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
store,
components: { Counter },
template: `
<div class="app">
<counter></counter>
</div>
`
})
在子组件中使用
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return this.$store.state.count
}
}
}
mapState 辅助函数
按官网的案例
import { mapState } from 'vuex'
export default {
// ...
computed: mapState({
// 箭头函数
siteBaseInfo: state => state.siteBaseInfo,
// 传字符串参数
siteBaseInfo: "siteBaseInfo",
// 为了能够使用 `this` 获取局部状态，必须使用常规函数
download_ios (state) {
return state.siteBaseInfo.download + this.prefix
},
download: state => state.siteBaseInfo.download
})
}
当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组
computed: mapState([
// 映射 this.count 为 store.state.count
'count'
])
mapState 与局部计算属性混合使用
使用对象展开运算符将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。
computed: {
localComputed () { /* ... */ },
// 使用对象展开运算符将此对象混入到外部对象中
...mapState({
// ...
})
}
getter 的使用
有时候我们需要从通过 state 得到一些新的状态,因为这一状态可能其他很多组件都要使用这一状态.比如余额这一参数,我们当前只有盈利和亏损额,但是很多页面都要使用余额进行显示,那么每个引入页面都要进行一次计算吗?想想就麻烦,还是只计算一次,然后直接获取这个余额值来的方便
store/getters.js
export default {
balance: (state) => {
return Number(state.userBasicInfo.profit) - Number(state.userBasicInfo.loss);
},
download: (state) => {
return state.siteBaseInfo.download;
}
}
mapGetters 辅助函数
辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'balance',
'download',
// ...
])
}
}
getter 的使用
//直接使用
store.getters.download
//组件中使用
computed: {
download () {
return this.$store.getters.download
}
}
//使用辅助函数
...mapGetters([
'download',
'balance',
])
//和mapState一起用
computed: {
...mapState({
siteBaseInfo: "siteBaseInfo",
}),
...mapGetters({
download: 'download'
})
},
Getter 也可以接受其他 getter 作为第二个参数
getters: {
// ...
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}
总之,getter 就是一个将一些需要进行再次计算的 state 计算好,然后将其作为 state 进行快捷的引用
mutation 使用
- 最好提前在你的 store 中初始化好所有所需属性
- 当需要在对象上添加新属性时，你应该使用 Vue.set(obj, 'newProp', 123)或以新对象替换老对象(对象展开符)
- mutation 必须是同步函数
每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler),会接受 state 作为第一个参数
//设置
mutations: {
SET_USER_BASIC_INFO(state) {
state.userBasicInfo = {a:1,b:2};
},
}
//使用
store.commit('SET_USER_BASIC_INFO')
提交载荷（Payload）
//设置
mutations: {
SET_USER_BASIC_INFO(state, payload) {
state.userBasicInfo = Object.assign({},payload);
},
}
//使用
store.commit('SET_USER_BASIC_INFO', {
a:1,
b:2
})
对象风格的提交方式
提交 mutation 的另一种方式是直接使用包含 type 属性的对象
store.commit({
type: 'SET_USER_BASIC_INFO',
data:{
a:1,
b:2,
}
})
//mutations的效果
mutations: {
increment (state, payload) {
state.userBasicInfo = Object.assign({},payload.data);
}
}
使用常量替代 Mutation 事件类型
// mutation-types.js
export const SET_USER_BASIC_INFO = 'SET_USER_BASIC_INFO';
// mutations.js
import { SET_USER_BASIC_INFO } from './mutation-types';
mutations: {
// 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
[SET_USER_BASIC_INFO] (state) {
// mutate state
}
}
mapMutations 辅助函数
//正常
this.$store.commit('SET_USER_BASIC_INFO');
//mapMutations
import { mapMutations } from 'vuex';
export default {
...,
methods:{
...mapMutations({
setUserBasicInfo: 'SET_USER_BASIC_INFO' // 将 `this.setUserBasicInfo()` 映射为 `this.$store.commit('SET_USER_BASIC_INFO')`
})
}
}
action
用来提交一个 mutation,还可以进行异步操作
//注册
const store = new Vuex.Store({
state,
mutations,
actions: {
//解构context.commmit
GET_HOME_INFO({commit}) {
commit("SET_USER_BASIC_INFO");
},
}
})
//触发
store.dispatch('GET_HOME_INFO')
//载荷形式
store.dispatch('GET_HOME_INFO',{})
//对象形式
store.dispatch({
type:'GET_HOME_INFO',
data:{}
})
mapActions 辅助函数
import { mapActions } from 'vuex'
export default {
...
methods: {
...mapActions({
getHomeInfo: 'GET_HOME_INFO' // 将 `this.getHomeInfo()` 映射为 `this.$store.dispatch('GET_HOME_INFO')`
})
}
}
异步的 action
action 中的中支持的异步 ajax,setTimeout,acync/await,promise...
store.dispatch('actionA').then(() => {
// ...
})
其他的传值还有一些方式
比如 props，seventBus，slocalStorage，sessionStorage，router 传参，cookie（不推荐，虽然就跟之前做购物车差不多的传递形式）
vue 组件之间数据传输(props 传值方式)
这个多用于父子组件之间的传值,是最基本的传值方式
父亲组件进行绑定,将数据绑定,其中 personal,personalData,imgUrl 是绑定的数据,@updata 是绑定的事件
<template>
...
<slideBar
@updata="updata"
:personal="personal"
:personalData="personalData"
:imgUrl="imgUrl"
></slideBar>
...
<template>
子组件进行获取数据通过 props 进行获取,可以设置一些静态类型检查,类似于 react 的 proptypes,同时子组件想要向父组件进行传值,可以通过 emit 进行传值就行了
export default {
props: {
slideMsg: Array,
personal: Object,
personalData: Object,
imgUrl: String
},
...
methods:{
submitEvent(){
...
this.emit("updata","我是获取的数据");
...
}
}
}
vue 组件之间数据传输(eventBus 进行组件传递)
事件 bus 通过一个新的 vue 实例,来进行事件监听和事件分发
commom/bus.js
//极简单的vue实例
import Vue from 'vue';
// 使用 Event Bus
const bus = new Vue();
export default bus;
在 game 组件中引入
import bus from "@/common/bus";
...
bus.$emit("moneyChange", {....});
...
在用 money 组件中引入
import bus from "@/common/bus";
...
bus.$on("moneyChange", msg => {
msg && this.initHomeData();
});
...
在最初的项目阶段这是一个不错的选择,但是随着项目体积的增大,事件触发和数据流向变得越来越不可见,后续开发和维护变得越来越困难.
sessionstorage
项目中使用的 sessionStorage
sessionStorage.setItem("msg", JSON.stringify(res.data)); //为了兼容之前的代码，有用到msg这个本地缓存的数据
sessionStorage.setItem("isMobile", res.data.mobile);
sessionStorage.setItem("invi", res.data.invitation);
sessionStorage.setItem("isLogin", res.data.trier);
sessionStorage.setItem("setPwd", res.data.fundpwd);
sessionStorage.setItem("isShow", res.data.bankcard);
localStorage
项目中关于声音的开关,样式选择,背景切换等，用来将用户的一些操作一直保存
//组件userSetting
localStorage.setItem("audio", this.switchValue);
//组件audioPlay
let audio = localStorage.getItem("audio");
sessionstorage 和 localStorage 看情况使用就好，sessionstorage 是浏览器关闭没了，localStorage 是一直存储不删除就在存在
params
依赖于 vue-router
this.$router.push({
name: "Main",
params: {
id: this.setting_id,
type: "3"
}
});
Vuex
Vuex - 标签 - 掘金
浪里行舟 从头开始学习 Vuex
VueJS 中学习使用 Vuex 详解
到底 vuex 是什么？
基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用
