鍍金池/ 問答/HTML/ 關(guān)于Vuex的報錯問題

關(guān)于Vuex的報錯問題

問題描述

想通過vuex來實現(xiàn)點擊菜單之后 tab就會新增我剛才點擊的

圖片描述

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

我嘗試過用action去更改, 但是并沒有什么卵用

相關(guān)代碼

// 請把代碼文本粘貼到下方（請勿用圖片代替代碼）

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')
      },
調(diào)用
 computed: {
      editableTabsValue() {
        return this.$store.state.editableTabsValue
      },
      editableTabs() {
        return this.$store.state.editableTabs
      }
    },

頁面的實現(xiàn)

<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組件

* 就是我點擊這個添加的這個事件的時候問題出現(xiàn)了

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

你期待的結(jié)果是什么？實際看到的錯誤信息又是什么？

我期望的正常賦值 能夠修改state

報錯

圖片描述

看看各位大神有我沒有知道是什么問題的 我都找半天了

回答
編輯回答
單眼皮

沒為computed的editableTabsValue屬性 設置set,你嘗試這樣寫看看

computed: {
      editableTabsValue:{
       
       get:function(){
       
         return this.$store.state.editableTabsValue
         
       },
       set:function(newValue){
              //doSomething
       }
      
      }
      
    },
2017年6月20日 09:04