时间戳

首页 > 解决方案 > 为什么 Vuex 状态将数组作为对象返回

typescript - 为什么 Vuex 状态将数组作为对象返回

问题描述

我使用的是Typescript + vue + vuex，状态定义为

const state: CommonDataState = {
  clients: [],
  version: 1
}

吸气剂是

const getters: GetterTree<CommonDataState, RootState> = {
  getClients: state=> () => { return state.clients; },
  getClientById: state => (id: string) => { return state.clients.filter(x => true)[0]; },
  getVersion: state => (): Number => { return state.version; }
}

在调用 getter getClientById 时，

渲染错误：“TypeError：state.clients.filter 不是函数”

当我使用 console.log() 打印 state.clients 时，它显示结果是一个具有默认属性为数组而不是数组类型的对象

{__esModule: true, __ob__: Observer}
default : Array(15)
__esModule : true
__ob__ : Observer {value: {…}, dep: Dep, vmCount: 0}
get default : ƒ reactiveGetter()
set default : ƒ reactiveSetter(newVal)
__proto__ : Object

默认值是正确的数组。但是，当我尝试将吸气剂更改为

  getClientById: state => (id: string) => { return state.clients.default.filter(x => true)[0]; },

它返回一个错误

[ts] 类型“客户端 []”上不存在属性“默认”。

那么，有谁知道是什么导致了这个错误？以及任何解决方案？

标签： typescriptvue.jsvuex

解决方案

试试改成这个结构

import { GetterTree, Getter } from 'vuex'
import { State } from './index'

const cartProducts: Getter<State, any> = (state: State) => {
  return state.cart.added.map(shape => {
    // ...
  })
}

const getterTree: GetterTree<State, any> = {
  cartProducts
}

export default getterTree

推荐阅读