Truncate text in an array of objects using vuex?

Question

this is kind of building on a question that i asked yesterday. Truncate Text in an array of object?

I wanna apply the same logic but using my vuex store. My store looks something like this:-

   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);
            }
        );
       }
    }
  }

So i am not sure how to apply the truncation logic on either my getter or setter which will return the desired array which i can use in my component using either {{mapMutation}} or {{mapGetter}}.

Any help will be appreciated. Thank you so much.

Where you put it depends on if you want the whole string and only display a part of it or don't care about the stuff you truncated. If you don't care, put it in the setter. But if you need the whole of the string but only want to display the first part, truncate it in the getter. — Batman
– Batman, Commented Nov 7, 2019 at 14:50

rule · Accepted Answer · 2019-11-07 14:56:33Z

3

You have 2 generic options:

Either you take the response from yesterday and you parse your Data before returning it on the get.

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

Or you can just apply the parse before saving the Data, just make sure you dont need the original Data

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

EDIT: just to clarify you either apply the parser on the mutation or on the getter, not in both.

answered Nov 7, 2019 at 14:56

rule

2811 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Somethingwhatever Over a year ago

I edited my code above and applied the logic on my getter but i get a console error saying it is undefined. Not sure what i'm doing wrong. And yes, i really should spend some time understanding identation as well.

Collectives™ on Stack Overflow

Truncate text in an array of objects using vuex?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related