TypeScript vuex.mapState函数代码示例

    function connectToComponent(
      nameOrComponent: string | Component,
      optionalComponent?: Component
    ): Component {
      let Component: Component, name: string
      if (typeof nameOrComponent !== 'string') {
        Component = nameOrComponent
        name = getOptions(Component).name || 'wrapped-anonymous-component'
      } else {
        Component = optionalComponent!
        name = nameOrComponent
      }

      const propKeys = keys(
        stateToProps,
        gettersToProps,
        actionsToProps,
        mutationsToProps,
        methodsToProps
      )

      const eventKeys = keys(
        actionsToEvents,
        mutationsToEvents,
        methodsToEvents
      )

      const containerProps = omit(collectProps(Component), propKeys)
      const containerPropsKeys = Object.keys(containerProps)

      const options = {
        name: `connect-${name}`,
        props: containerProps,
        components: {
          [name]: Component
        },
        computed: merge(mapState(stateToProps), mapGetters(gettersToProps)),
        methods: merge(
          mapActions(merge(actionsToProps, actionsToEvents)),
          mapMutations(merge(mutationsToProps, mutationsToEvents)),
          mapValues(merge(methodsToProps, methodsToEvents), bindStore)
        )
      }

      insertLifecycleMixin(options, lifecycle)
      insertRenderer(
        options,
        name,
        propKeys.concat(containerPropsKeys),
        eventKeys
      )

      if (transform) {
        transform(options, lifecycle)
      }

      return typeof Component === 'function' ? Vue.extend(options) : options
    }

export function createDetailablePage(isImplicit: boolean) {
  return {
    name: `${isImplicit ? 'implicit-' : ''}post-page`,
    computed: {
      ...mapState({
        date_format: (state: RootState) => state.meta.hexoConfig.dateTimeFormat.date_format,
        time_format: (state: RootState) => state.meta.hexoConfig.dateTimeFormat.time_format,
        target: (state: RootState) => state.detailable.target
      })
    },
    async fetch({ store, route }: Context) {
      const sourceOrSlug = isImplicit ? route.path.replace(/^\/pages\/?/, '') : route.params.slug;
      await store.dispatch(`detailable/${Fetch_Detailable_Target}`, { isImplicit, sourceOrSlug });
    },
    beforeRouteUpdate: async function (this: any, to, from, next) {
      const { fetch } = this.$options;
      if (fetch) {
        try {
          this.$nprogress.start();
          this.$data.search = '';
          await fetch({ store: this.$store, route: to });
          this.$nprogress.done();
        } catch (error) {
          next(error);
        }
      } else {
        next();
      }
    } as NavigationGuard,
    render(this: any, h: CreateElement) {
      return h(DetailablePage, {
        props: {
          isImplicit,
          date_format: this.date_format,
          time_format: this.time_format,
          target: this.target
        }
      });
    }
  };
}

          this.remove_apiList(currentId)
          this.isModify = false
        }
      }
    },
    async editApi(): Promise<any> {
      let { currentId, apiName, apiDesc } = this
      if( currentId && apiName && apiDesc ){
        let editParam: ITFetchApiList = {
          type: 'modify',
          id: currentId,
          name: apiName,
          desc: apiDesc
        }

        let removeState = await FETCH_API_LIST(editParam)
        if(removeState.ok === 1){
          this.modify_apiList({
            _id: currentId,
            name: apiName,
            desc: apiDesc
          })
          this.isModify = false
        }
      }
    }
  },
  computed: mapState([
    'apiList'
  ])
} as ComponentOptions<Modify>

// <router-link :to="/apiInfo?id={{item._id}}">{{item.name}}</router-link>
export default {
  template: `<div class="demo">
    <div v-for="item in apiList">
      <h4>{{item.name}} <b>{{item.desc}}</b></h4>
        <router-link :to="{path: newPath(item._id)}">{{item.name}}</router-link>
      <hr />
    </div>
    <router-view></router-view>
  </div>`,
  data(){
    return {
      message: 'Hello Message'
    }
  },
  components:{},
  methods:{
    onClick: function(): void {
      window.alert(this.message)
    },
    newPath: function(_id: string): string{
      return `/apiInfo?id=${_id}`
    }
  },
  computed: {
    ...mapState([
      'apiList'
    ])
    
  }
} as ComponentOptions<Api>

    ]),

    // 异步请求apiList
    async fetchApiList(){
      let fetchBack = await FETCH_API_LIST({
        type: 'search'
      })
      this.updata_apiList(fetchBack)
    },
    async fetchMockList(){
      let fetchMockBack = await FETCH_MOCK_LIST({
        type: 'search'
      })
      this.updata_mockList(fetchMockBack)
    },
    async fetchFileMockList(){
      let fetchMockBack = await FETCH_MOCK_CHANGE({
        type: 'search'
      })
      this.updata_fileMockList(fetchMockBack)
    }
  },
  // methods:{
  //   ...mapActions([
  //     'fetchApiList'
  //   ])
  // },
  computed: mapState([
    'routes'
  ])
} as ComponentOptions<Menu>

export default Vue.extend({
  name: 'gitment-comment',
  props: {
    isImplicit: {
      required: true,
      type: Boolean
    },
    slugOrSource: {
      required: true,
      type: String
    }
  },
  computed: {
    ...mapState({
      gitmentOptions: (state: RootState) => state.meta.themeConfig.gitment
    })
  },
  mounted() {
    if (!this.gitmentOptions.enable) {
      return;
    }

    // https://github.com/imsun/gitment#3-render-gitment
    const gitment = new Gitment({
      id: this.slugOrSource,
      owner: this.gitmentOptions.github_id,
      repo: this.gitmentOptions.repository_name,
      oauth: {
        client_id: this.gitmentOptions.client_id,
        client_secret: this.gitmentOptions.client_secret,

      if(saveState.ok === 1){

        // 偷懒
        window.location.reload()
        // this.callback()
      }
    },
    async deleteMock(){
      let deleteState = await FETCH_MOCK_LIST({
        type: 'delete',
        id: this.mockId,
        name: this.name
      })
      if(deleteState.ok === 1){
        this.remove_mockList(this.mockId)
        this.callback()
      }
    },
    async fetchCode(){
      let codeState = await FETCH_MOCK_LIST({
        type: 'readCode',
        name: this.name
      })
      this.code = codeState.data
    }
  },
  computed: mapState([
    'apiList',
    'mockList'
  ])
} as ComponentOptions<EditMock>

export default {
  template: `<div>
              <ul>
                <li v-for="item in fileMockList">
                  <div>{{item}}</div>
                  <button @click="deleteData(item)">删除</button>
                </li>
              </ul>
            </div>`,
  data(){
    return {
      
    }
  },
  components:{},
  methods:{
    deleteData(data){
      FETCH_MOCK_CHANGE({
        type: 'delete',
        id: data._id
      })
    },
  },
  computed: {
    
    ...mapState([
      'fileMockList'
    ])
  }
} as ComponentOptions<MockList>

export default Vue.extend({
  name: 'blur-div',
  props: {
    blur: {
      required: true,
      type: Number
    },
    isTopNav: {
      type: Boolean,
      'default': false
    }
  },
  computed: {
    ...mapState({
      background: (state: RootState) => state.meta.themeConfig.background,
      blurTarget: (state: RootState) => state.meta.themeConfig.blur
    })
  },
  render(h) {
    const {
      url, css_size, css_position,
      enable_picture, background_color,
      gradient_color
    } = this.background as ThemeBackground;
    const { blur, isTopNav } = this.$props;
    const { font, background_color: blur_color, hide_overflow, opacity } = this.blurTarget as ThemeBlur;

    const absoluteStyle: any = {
      position: 'absolute',
      top: '0',
      left: '0',

    EditMock
  },
  methods: {
    ...mapActions([]),
    ChangeMock(ev) {
      this.mockId = ev.target.value
      this.isEdit = false
      FETCH_MOCK_CHANGE({
        type: 'modify',
        pid: this.mockId,
        id: this.id
      })
    },
    clickHandleEdit() {
      this.isEdit = true
    },
    modifyBack() {
      this.isEdit = false
    }
  },
  computed: {
    ...mapState([
      'apiList',
      'mockList',
      'fileMockList'
    ]),
    currentMockList() {
      return this.mockList.filter((item:ITMockListInfo) => item.pid === this.id)
    }
  }
} as ComponentOptions<ApiInfo>