halower / vue-tree

tree and multi-select component based on Vue.js 2.0
https://github.com/halower/vue2-tree/blob/master/README.md
MIT License
935 stars 209 forks source link

vtree与vuex使用时报错 #151

Open zhengyu88 opened 5 years ago

zhengyu88 commented 5 years ago

我把demo的代码放到我的工程中后,刷新页面有报错:

vue.esm.js?efeb:610 [Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers."

(found in <Root>)

Error: [vuex] Do not mutate vuex store state outside mutation handlers.
at assert (vuex.esm.js?358c:97)
at Vue.store._vm.$watch.deep (vuex.esm.js?358c:746)
at Watcher.run (vue.esm.js?efeb:3367)
at Watcher.update (vue.esm.js?efeb:3341)
at Dep.notify (vue.esm.js?efeb:721)
at VueComponent.set [as $set] (vue.esm.js?efeb:1084)
at VueComponent.parentCheckedHandle (v2-tree.js?9534:formatted:248)
at VueComponent.theParentChecked (v2-tree.js?9534:formatted:889)
at VueComponent.checkedChange (v2-tree.js?9534:formatted:895)
at VueComponent.handler (v2-tree.js?9534:formatted:850)

定位到是parentCheckedHandle: function(e, t) 里的this.$set(e, "checked", d) (v2-tree.js里的248行), 应该是改变object属性放到mutation外面了,如何把this.$set 替换成 state.obj = { ...state.obj, newProp: 123 } 这种类型呢?

vue文件:

<template>
  <div id="left_container">
    <input class="tree-search-input" type="text" v-model="searchword" placeholder="search..."/>
    <button class=" tree-search-btn" type="button" @click="search">search</button>
    <v-tree ref='tree' :data='tree_detail' :draggable='true' :radio="true" />
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    name: "SuiteTree",
    data: function() {
      return {
        searchword: ''
      }
    },
    computed: mapState({
      tree_detail: state => state.suiteTree.tree_detail
    }),
    created() {
      this.$store.dispatch('getTreeDetail', {suite_id: this.$route.params.suite_id})
    }
}

另外还发现一个问题,data使用vuex的state后,重新更新data后,drag-node-end方法里targetNode不包含parent()方法了

odanzhou commented 5 years ago

@zhengyu88 如果要通过vuex进行状态管理,你只能在初始化时将vuex中的数据拿来复制成一个新的state,再深度watch 这个新的state,一旦新的state发生变化,则改变vuex中的state的值

joaossantos commented 5 years ago

@CosSalt Can you show me an example? I keep getting the same error when I try to save the checked layers on vuex.