Vuex filter state

Question

I'm at my first app in Vuejs Vuex. I can not find the best way to filter a state.

store/index.js

 state: {
  projects: []
 },
 mutations: {
   SET_PROJECT_LIST: (state, { list }) => {
     state.projects = list
   }  
 },
 actions: {
   LOAD_PROJECT_LIST: function ({ commit }) {
    axios.get('projects').then((response) => {
      commit('SET_PROJECT_LIST', { list: response.data})
     }, (err) => {
     console.log(err)
   })
  }
 }

in the component:

computed: {
  ...mapState({
    projects
  })
}

At this point I have a list of my projects. Good!

Now I added buttons to filter my projects like: Active Project, Type Project ...

How do I manipulate my projects object (this.projects)?

With another one this.$store.dispatch

With another getters function

I manipulate the state without changing the status?

I'm a bit confused.

Some examples of filters on lists populated in Vuex?

EDIT: I was trying that way:

this.$store.getters.activeProjects()

But how I update this.projects?

activeProjects(){
  this.projects = this.$store.getters.activeProjects() 
}

does not work

Answer 1

I'd recommend to keep your original state intact and filter its data by using "getters".

In fact, the official documentation includes an example of how to get all the "done" todos. It might be useful for you:

  const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

Getters reference: https://vuex.vuejs.org/en/getters.html

Good luck!