CODEWITHSUNDEEP
javascriptvue.jsvuex
Somethingwhatever
Somethingwhatever

Reputation: 1358

Truncate text in an array of objects using vuex?

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.

Upvotes: 1

Views: 115

Answers (1)

rule
rule

Reputation: 281

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.

Upvotes: 3

Related Questions