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

使用另一个 getters 函数

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

我有点困惑。

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

Getter 参考：https://vuex.vuejs.org/en/getters.html

祝你好运！