vuejs2 - Vuex 过滤状态

Question

我正在使用 Vuejs Vuex 中的第一个应用程序。我找不到过滤状态的最佳方法。

商店/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)
   })
  }
 }

在组件中:

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

此时我有一个项目列表。好!

现在我添加了按钮来过滤我的项目，例如:事件项目，类型项目 ...

如何操作我的项目对象 (this.projects)？

与另一个 this.$store.dispatch

使用另一个吸气函数

我在不改变状态的情况下操纵状态？

我有点困惑。

在 Vuex 中填充的列表过滤器的一些示例？

编辑:我是这样尝试的:

this.$store.getters.activeProjects()

但是我如何更新 this.projects？

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

不工作

Answer 1

我建议保持原始状态不变并使用“getters”过滤其数据。

事实上，官方文档包含一个如何获得所有“已完成”待办事项的示例。它可能对您有用:

  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 引用:https://vuex.vuejs.org/en/getters.html

祝你好运!