[Vue] vue 组件传值 (2)

每个 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(() => { // ... }) 其他的传值还有一些传统的方式

比如 localStorage，sessionStorage，router 传参，cookie（不推荐，虽然就跟之前做购物
车差不多的传递形式）

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 个页面的大型单页面应用