/SyncStateTool

基于vuex,用于双向绑定state中的数据

Primary LanguageTypeScript

SyncStateTool

基于vuex,用于双向绑定state中的数据

使用方法:

  • 在main.ts中
import SyncStateTool from 'SyncStateTool/index.ts';
import store from './store';
SyncStateTool.connect(store)
  • vue组件中

通过装饰器

import { Component, Vue } from 'vue-property-decorator';
import { createSyncStateDecoratorWithNamespace, SyncState } from 'SyncStateTool/index.ts';

const namespace = 'namespace';
const NamespacedSyncState = createSyncStateDecoratorWithNamespace(moduleName);

@Component
export default class extends Vue {
  // 带命名空间的
  @NamespacedSyncState('pagination.currentPage') currentPage!: string
  @SyncState(namespace, 'pagination.currentPage') currentPage!: string
  
  // 不带命名空间
  @SyncState('pagination.currentPage') currentPage!: string
}

通过方法映射

import Vue from 'vue'
import { createSyncStateMap } from 'SyncStateTool/index.ts';

const namespace = 'namespace';
const syncMapState = createSyncStateMap(namespace);
// 没有命名空间的时候,什么都不传 const syncMapState = createSyncStateMap();

export default Vue.extend({
  // 带命名空间的
  computed: {
  ...syncMapState({
      currentPage: 'pagination.currentPage',
      pageSize: 'pagination.pageSize',
    }),
  }
})