使用vuex截断对象数组中的文本?

时间:2019-11-07 14:48:07

标签: javascript vue.js vuex

这是我昨天提出的一个问题。 Truncate Text in an array of object?

我想应用相同的逻辑,但是要使用我的vuex存储。我的商店看起来像这样:-

   state: {
     Data: []
         },
     getters: {
        getData:state => {
         const maxLength = 10;
          const resultArray = state.Data.map(i => {
           if (i.name <= maxLength) i.shortName = i.name;
            else {
           const shortenedName = i.name.substring(0, maxLength + 1);
         i.shortName = shortenedName + '...';
       }
       return i;
      });
       console.log(resultArray)
     }
         },
   mutations: {
     setData(state,payload) {
     state.Data = payload
        },
   const actions = {
setItems: (context, payload) => {
    if (payload) {
        context.commit("setData", payload);
        return;
    }
    else {
        Vue.$http.get(`https://example.com/getData`).then(
            (response) => {
                context.commit("setData", response.body);
            },
            (error) => {
                console.log(error);
            }
        );
       }
    }
  }

因此,我不确定如何在我的getter或setter上应用截断逻辑,它们将返回所需的数组,可以使用{{mapMutation}}{{mapGetter}}在我的组件中使用。

任何帮助将不胜感激。非常感谢。

1 个答案:

答案 0 :(得分:3)

您有2个通用选项:

您要么接受昨天的回复,然后解析数据,然后再将其返回获取。

getters: {
  getData:state => {
    return parserSomeoneGaveYouInResponseToTheLastQuestion(state.Data)
  }
},

或者您可以仅在保存数据之前应用解析,只需确保您不需要原始数据

mutations: {
  setData(state,payload) {
     state.Data = parserSomeoneGaveYouInResponseToTheLastQuestion(payload)
  },
}

编辑:只是为了澄清您将解析器应用于突变或获取器,而不是两者都应用于