关于vuex的数据管理的实践总结

最新推荐文章于 2025-05-10 12:29:32 发布

原创最新推荐文章于 2025-05-10 12:29:32 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍Vue项目中实现父子组件间数据通信的方法及store状态管理实践。通过具体示例，展示了如何利用Vue 2.0的特性完成数据传递与更新，并探讨了在mounted生命周期钩子中获取数据的有效策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

昨天做了一个点击按钮出现弹出层（遮罩层）的功能这个功能主要使用v-show 设置变量显示隐藏即可，主要是menu.vuef父组件和bottom.vue 子组件之间的父子数据通信，用vue2.0的父组件传递对象给子组件的方式，让子组件接收到值，并及时同步数据的功能，详细情况见之前的博客有记录，这本身没什么难度，后面在取数据的时候出现了问题，取数据应该是把我们在mounted中改变的数据放在store中托管当我们使用的时候只是用的我们getter即可，但是在开始我并没有获取数据，相当dispatch了一个空数组过去。

在这里我要说的是我们启动事件主要有两种方式

1 this.$store.dispatch('SHOW_HEAD_SUCC')

使用dispatch启动发送action

2 直接调用action 返回的函数

SHOW_HEAD_SUCC（）

这两种情况都在在我们vue的生命周期函数中进行调用

mounted 是我们vue2.0中的vue组件插入到dom时候进行的操作，如果我们想获取数据可以在这个时候进行调用promise返回的数据在这个时候进行dispatch

当然最合适的调用是在computed或者watch监听路由变化时候进行的 ...不再多说

下面贴部分代码：

在menu.vue中使用我们的数据

import { mapGetters, mapActions } from 'vuex'

computed:{

  ...mapGetters(['cate2DishList','getImgMode','isShowMask','isShowNum','cateList'
    // ,'getUser'
    ])

//使用我们上面的变量 就直接v-text或者{{}}

methods:{
  ...mapActions([
'setCate2DishList',
'setImgMode',
'showSpec',
'showCombo',
'showMask',
'hideMask',
'hideNum',
'showNum',
'setCateList'
    // ,'setUser'
    ])

////////////////////////////////////////////////////////////////////

//上面是不可缺少的部分

that.cartLoadPromise.then(function(){
window._startRenderTime = Date.now()
that.categoryList=cartService.getCatList()
that.dishList=cartService.getDishList()
that.cartInfo=cartService.getCartInfo()
that.cartList = cartService.getCartList()

//that后面跟着的变量一定要在export导出的data中进行定义 否则会报错

报错信息见下图

//这个是首先获取到数据然后再放到我们的store中进行管理
//that.setCate2DishList(that.categoryList)
that.setCateList(that.cartList);

还有我们store中的代码（cart.js中分离）

const state = {
cateList: [],
dishList: [],
cate2DishList: [],
num: 0,
remark: ''
}

const getters = {
cate2DishList: state => {
return state.cate2DishList
  },
num: state => {
return state.num
  },
remark: state => {
return state.remark
  },
cateList: state => {
// console.log(state.cateList);
    return state.cateList
  }
}

const actions = {
setNum: ({commit}, num) => commit('setNum', num),
setRemark: ({commit}, remark) => commit('setRemark', remark),
setCate2DishList: ({commit}, cate2DishList) => commit('setCate2DishList', cate2DishList),
setCateList:({commit}, cateList) => commit('setCateList',cateList)
}

const mutations = {
setCate2DishList (state, cate2DishList) {
    state.cate2DishList = cate2DishList
  },
setNum (state, num) {
    state.num = num
  },
setRemark (state, remark) {
    state.remark = remark
  },
setCateList(state, cateList) {
//console.log(state)
    //console.log(cateList);
    state.cateList = cateList
  }
}

export default {
state,
getters,
actions,
mutations
}