一文讲透Vuex 组件传值 存值与取值 数据流转 三板斧

前端开发 极其重要的一环即是数据 甚至可说最重要的一环
本文讲解vue2中常用的vuex实现前端数据间的流转

state 定义数据

const state = {
    // 存储一些初始值
    code: '',
    token: '',
    userInfo: getToken()
}

mutations 操作数据 state 默认参数

const mutations = {
    GETUSERINFO(state, userInfo) {
        state.userInfo = userInfo
    }
}

actions 定义方法触发mutations

    // 获取用户信息
    async getUserInfo({ commit }) {
    	//此处调取api中的接口请求 等待返回数据存储在vuex中
        let result = await reqUserInfo()
            // console.log(result)
        if (result.code == 200) {
            commit('GETUSERINFO', result.data) //触发mutations
            return 'OK'
        } else {
            return Promise.reject(new Error('getUserInfo failed'))
        }
    }

modules 实现模块化划分

export default new Vuex.Store({
    // 仓库存储数据的地方
    // state,
    // // 修改state的唯一手段
    // mutations,
    // // 处理action可以书写自己的业务逻辑 和异步
    // actions,
    // // 计算属性 用于简化仓库数据 让组件获取仓库数据更加方便
    // getters,

    modules: {
        home,
        search,
        detail,
        shopcart,
        user,
        trade
    }
})

需要的页面时 调用 this.$store.dispatch()调用actions中方法

// 获取登陆用户信息
this.$store.dispatch('getUserInfo')

存值 this.$store.commit(‘方法名’,存取的数据)

取值 this.$store.state.取出的数据

如果Vuex实现模块化 modules
比如 取出存放store目录下 user.js中userInfo的值
this.$store.state.user.userInfo

至于mapState mapGetters等可以算一种简写语法糖了

this.$store.state.count

import { mapState } from 'vuex'
computed：mapState([
  'count'
])

//省略 this.$store.state

//直接使用
this.$store.getters.doneTodosCount

//使用辅助方法
import { mapGetters } from 'vuex'
computed：mapGetters({
  doneCount: 'doneTodosCount'
})

//省略 this.$store.getters

//触发mutations
this.$store.commit('xxx')

//辅助函数
import { mapMutations } from 'vuex'
methods：mapMutations(['increment' ])

//省略this.$store.mutations

如果本文对你的前端学习上有帮助 麻烦帮我点个赞关注一波
有大佬 也欢迎指正 共同学习