Vuex 过滤状态

Question

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

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

在组件中：

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" 过滤其数据。

事实上，官方文档包含一个如何获取所有 "done" 待办事项的示例。它可能对您有用：

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

吸气剂参考：https://vuex.vuejs.org/en/getters.html

祝你好运！

Vuex 过滤状态

Vuex filter state

vuex

vuejs2