(VueJS)Vuex getter应根据另一个模块状态更改进行更新

时间:2017-07-04 18:44:40

标签: javascript vue.js vuejs2 vuex

我有两个Vuex商店模块:<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/back_main" tools:context="com.example.MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:weightSum="1" android:layout_alignParentBottom="true"> <ImageView android:layout_width="wrap_content" android:layout_height="56dp" android:layout_weight="0.25" android:src="@drawable/img_audio"/> <ImageView android:layout_width="wrap_content" android:layout_height="56dp" android:layout_weight="0.25" android:src="@drawable/img_event"/> <ImageView android:id="@+id/imageView" android:layout_width="wrap_content" android:layout_height="56dp" android:layout_weight="0.25" android:src="@drawable/img_video" /> <ImageView android:layout_width="wrap_content" android:layout_height="56dp" android:layout_weight="0.25" android:src="@drawable/img_more"/> </LinearLayout> </RelativeLayout> ListItemsListSort有一个getter,它基本上是根据这两个模块的状态计算出来的。请参阅以下代码:

ListItems

但是,当// Import the ListSort store module import listSort from './list-sort'; // ListItems getters const getters = { companiesSorted: () => { return _.orderBy(state.companies, [listSort.state.sortAttribute], [listSort.state.sortDirection]); }, }; 中的状态发生更改(即ListSortsortAttribute已更改)时,这不会导致ListItems getter重新计算。我怎么能告诉Vuex,鉴于对计算sortDirection的依赖已经改变,Vuex应该重新计算那个getter?

谢谢!

1 个答案:

答案 0 :(得分:2)

  

如果依赖于计算,我怎么能告诉Vuex   公司存储已经改变,Vuex应该重新计算那个吸气剂吗?

你不会,它会自动为你完成!对于懒惰的开发者来说,这不是很棒吗?

应该导入Vuex模块的唯一JS模块是初始化Vuex的JS模块,通过new Vuex.Store将Vuex模块捆绑在一起。

Vuex模块获取者可以访问其本地staterootStaterootState是您访问其他模块数据的地方。

https://vuex.vuejs.org/en/modules.html#module-local-state

看起来应该是这样的:

companiesSorted: (state, getters, rootState) => {
    return _.orderBy(state.companies,
      [rootState.listSortModule.sortAttribute],
      [rootState.listSortModule.sortDirection]);
  },

其中listSortModule是您为模块指定的名称。