关于Vuex的报错问题

Question

问题描述

想通过vuex来实现点击菜单之后 tab就会新增我刚才点击的

问题出现的环境背景及自己尝试过哪些方法

我尝试过用action去更改, 但是并没有什么卵用

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

store

 editableTabs: [], // tabs存放的地方
 editableTabsValue: 'index', // 默认展示

mutation

// 添加
  ADDTABS: (state, ev) => {
    // state.editableTabsValue = ev.name  原本是从这里直接改两个state的
    state.editableTabs.push({
      title: ev.title,
      name: ev.name,
    })
  },
  // 修改默认值
  HANDLERVIEWS: (state, ev) => {
    state.editableTabsValue = ev
  },

页面中使用

更改

 addTab() {
        this.$store.commit('ADDTABS', {
          title: 'NEW TAB',
          name: 'name'
        })
        this.$store.commit('HANDLERVIEWS', 'name')
      },

调用

 computed: {
      editableTabsValue() {
        return this.$store.state.editableTabsValue
      },
      editableTabs() {
        return this.$store.state.editableTabs
      }
    },

页面的实现

<template>
  <div>
      <el-button
        size="small"
        @click="addTab"
      >
        add tab
      </el-button>
    <el-tabs v-model="editableTabsValue" type="card" closable
             @tab-click="handleClick"
             @tab-remove="removeTab"
    >
      <el-tab-pane :label="'首页'" :name="'index'" :closable="false">
      </el-tab-pane>
      <el-tab-pane
        v-for="(item, index) in editableTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

element的tabs组件

* 就是我点击这个添加的这个事件的时候问题出现了

  addTab() {
        this.$store.commit('ADDTABS', {
          title: 'NEW TAB',
          name: 'name'
        })
        this.$store.commit('HANDLERVIEWS', 'name')
      },

你期待的结果是什么？实际看到的错误信息又是什么？

我期望的正常赋值 能够修改state

报错

看看各位大神有我没有知道是什么问题的 我都找半天了

Answer 1

没为computed的editableTabsValue属性 设置set,你尝试这样写看看

computed: {
      editableTabsValue:{
       
       get:function(){
       
         return this.$store.state.editableTabsValue
         
       },
       set:function(newValue){
              //doSomething
       }
      
      }
      
    },