雲墨知秋 2022-08-01 21:35 采纳率: 50%
浏览 45
已结题

vue中vuex使用问题

问题遇到的现象和发生背景

img


在mounted正常使用vuex

img

但,通过方法调用,就有报错:

img

img

问题相关代码,请勿粘贴截图

sum.vue

<template>
  <div>
    <h1>当前人员数{{ $store.state.sum }}</h1>
    <button @click="getsum()">点击获取人数</button>
  </div>
</template>

<script>
export default {
  name: 'VuextextSum',

  data() {
    return {}
  },
  methods: {
    getsum() {
      this.$store.dispatch('getsum')
    }
  },
  mounted() {
    getsum()
    // setTimeout(() => getsum(), 3000)
    // this.$store.dispatch('getsum')
  }
}
</script>

<style lang="scss" scoped>
</style>

vuex

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {
  say() {
    console.log("被触发了");
  },
  getsum() {
    console.log("请求action成功,即将请求mutations");
    this.commit("GETSUM")
  },
}
//准备mutations对象——修改state中的数据
const mutations = {
  GETSUM() {
    console.log("请求mutations成功");
    this.state.sum = this.state.persons[0].length
    console.log(this.state.persons[0].length);

  }
}
//准备state对象——保存具体的数据
const state = {
  persons: [
    [{
      name: '张安'
    }, {
      name: '李四'
    }, {
      name: '王五'
    }]
  ],
  sum: 0
}

//创建并暴露store
export default new Vuex.Store({
  actions,
  mutations,
  state
})

个人感觉是生命周期的问题,希望各位解答。

  • 写回答

2条回答 默认 最新

  • 崽崽的谷雨 2022-08-02 10:08
    关注

    this.getsum()

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 8月11日
  • 已采纳回答 8月3日
  • 创建了问题 8月1日

悬赏问题

  • ¥15 主机可以ping通路由器但是连不上网怎么办
  • ¥15 数据库一张以时间排好序的表中,找出多次相邻的那些行
  • ¥50 关于DynamoRIO处理多线程程序时候的问题
  • ¥15 kubeadm部署k8s出错
  • ¥15 Abaqus打不开cae文件怎么办?
  • ¥20 双系统开机引导中windows系统消失问题?
  • ¥15 小程序准备上线,软件开发公司需要提供哪些资料给甲方
  • ¥15 关于生产日期批次退货退款,库存回退的问题
  • ¥15 手机应用的时间可以修改吗
  • ¥15 docker 运行OPEN-webui异常