Question

我正在创建语言抽认卡应用程序，并且在切换列表时状态更新存在问题。因此，我发现商店中的突变正在被触发，但是在我的Vuex Dev Tools中，尽管vue有所更新，但状态并未注册更改...

HTML

<label style="margin-left: 5px">Word List</label>
<md-select id="list-select" v-model="currentList">
   <md-option v-for="(list, index) in wordLists" :key="index" :value="list.id">
       {{list.name}}
   </md-option>
</md-select>

JS组件

import {mapGetters} from 'vuex';

...

computed: {
  ...mapGetters({
     showModalState: 'showModal',
     computedList: 'currentListWords',
     wordLists: 'wordLists'
  }),

...

watch: {
  currentList(val) {
     let list = this.wordLists.filter((v) => v.id === val).slice();

      this.$store.commit("setCurrentList", list);
      this.$store.commit("setTempList", list);
  }

...

JS商店突变

setCurrentList(state, payload){
  state.currentList = payload;
},
setTempList(state, payload){
  state.tempList = payload;
},

JS Getters

wordLists(state){
  return state.wordList;
},
currentList(state){
  return state.currentList;
},

存储

...
currentList: [],
wordLists: [],
...

Answer 1

您是否在Vuex存储对象中添加了getters？ store.getters.showModal，store.getters.currentListWords等。如果没有，请使用mapState而不是mapGetters来访问纯状态。

Answer 2

为使更改具有响应性，您不能直接分配值。您将需要使用Vue.set（如果要更新特定属性/索引的值）或Object.assign（如果要更新完整的对象）。了解有关Vue反应性here的更多信息。

您必须按照以下步骤进行突变才能使您的更改具有响应性。

@Select("SELECT * FROM material")
@Results(id = "MaterialResultMap", value = {
        @Result(property = "labels", column = "label_ids", many = @Many(select = "com.clear.ims4.entity.label.LabelRepository.searchByIds")),
        @Result(property = "download", column = "download_id", one = @One(select = "com.clear.ims4.business.material.download.DownloadRepository.searchById")),
        @Result(property = "id", column = "id", jdbcType = JdbcType.INTEGER, id = true) })
@TypeDiscriminator(javaType = String.class, column = "type", cases = {
        @Case(value = "program", type = Program.class, results = {
                @Result(property = "layout", javaType = ProgramLayout.class, column = "{objectName=type,objectId=id}", one = @One(select = "com.clear.ims4.business.material.program.layout.ProgramLayoutRepository.searchByObject")),
                @Result(property = "widgets", column = "id", many = @Many(select = "com.clear.ims4.business.material.program.widget.WidgetRepository.searchByProgram")),
                @Result(property = "id", column = "id", jdbcType = JdbcType.INTEGER, id = true) }),
        @Case(value = "office", type = Office.class, results = {
                @Result(property = "images", column = "id", many = @Many(select = "com.clear.ims4.business.material.MaterialRepository.searchByMaterial")),
                @Result(property = "id", column = "id", jdbcType = JdbcType.INTEGER, id = true) }),
        @Case(value = "playlist", type = Playlist.class, results = {
                @Result(property = "materials", column = "id", many = @Many(select = "com.clear.ims4.business.material.MaterialRepository.searchByMaterial")),
                @Result(property = "id", column = "id", jdbcType = JdbcType.INTEGER, id = true) }),
        @Case(value = "webapp", type = Webapp.class, results = {
                @Result(property = "layout", javaType = Layout.class, column = "{objectName=type,objectId=id}", one = @One(select = "com.clear.ims4.business.entity.layout.LayoutRepository.searchByObject")),
                @Result(property = "pages", column = "id", many = @Many(select = "com.clear.ims4.business.material.webapp.page.PageRepository.searchByWebapp")),
                @Result(property = "id", column = "id", jdbcType = JdbcType.INTEGER, id = true) }) })
List<Material> search();

@Select("SELECT * FROM material WHERE id=#{id} LIMIT 1")
@ResultMap(value = "MaterialResultMap")
@TypeDiscriminator(javaType = String.class, column = "type", cases = {
        @Case(value = "program", type = Program.class, results = {
                @Result(property = "layout", javaType = ProgramLayout.class, column = "{objectName=type,objectId=id}", one = @One(select = "com.clear.ims4.business.material.program.layout.ProgramLayoutRepository.searchByObject")),
                @Result(property = "widgets", column = "id", many = @Many(select = "com.clear.ims4.business.material.program.widget.WidgetRepository.searchByProgram")),
                @Result(property = "id", column = "id", jdbcType = JdbcType.INTEGER, id = true) }),
        @Case(value = "office", type = Office.class, results = {
                @Result(property = "images", column = "id", many = @Many(select = "com.clear.ims4.business.material.MaterialRepository.searchByMaterial")),
                @Result(property = "id", column = "id", jdbcType = JdbcType.INTEGER, id = true) }),
        @Case(value = "playlist", type = Playlist.class, results = {
                @Result(property = "materials", column = "id", many = @Many(select = "com.clear.ims4.business.material.MaterialRepository.searchByMaterial")),
                @Result(property = "id", column = "id", jdbcType = JdbcType.INTEGER, id = true) }),
        @Case(value = "webapp", type = Webapp.class, results = {
                @Result(property = "layout", javaType = Layout.class, column = "{objectName=type,objectId=id}", one = @One(select = "com.clear.ims4.business.entity.layout.LayoutRepository.searchByObject")),
                @Result(property = "pages", column = "id", many = @Many(select = "com.clear.ims4.business.material.webapp.page.PageRepository.searchByWebapp")),
                @Result(property = "id", column = "id", jdbcType = JdbcType.INTEGER, id = true) }) })
Material searchById(@Param("id") Integer id);

Vuex提交未更新状态

2 个答案: