为啥 Vuex 状态将数组作为对象返回

Posted 2023-02-22

【中文标题】为啥 Vuex 状态将数组作为对象返回

【英文标题】：Why Vuex state return array as an object为什么 Vuex 状态将数组作为对象返回

【发布时间】：2018-11-18 02:16:51

【问题描述】：

我用的是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

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

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

返回错误

[ts] 类型“Client[]”上不存在属性“default”。

那么，有谁知道是什么导致了这个错误？有什么解决办法吗？

【问题讨论】：

您可以使用 JSON.stringify 和 JSON 解析获取数组：getClientById: state => (id: string) => return JSON.parse(JSON.stringify(state.clients)).filter(x => true)[0]; .

你可以使用这个插件github.com/mrcrowl/vuex-typex

【参考方案1】：

尝试改成这个结构

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

【讨论】：

Getter<State, any>为什么你用any代替了RootState？正确的不应该是Getter<State, RootState>？我真的不明白为什么 RootState 应该是，以及没有的危险