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）を操作できますか？別のゲッター機能

私は、ステータスを変更せずに状態を操作して、別の1 this.$store.dispatch

で

？

私は少し混乱しています。

Vuexに入力されたリストのフィルタの例はいくつかありますか？

EDIT： 私はそのようにしようとしていた。

this.$store.getters.activeProjects() 

しかし、私はthis.projectsを更新する方法？

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

は、私はそのままあなたの元の状態を維持し、「ゲッター」を使用することによって、そのデータをフィルタリングすることをお勧めしたい

Answer 1

を動作しません。

実際、公式ドキュメントには、「完了」されたすべての作業を行う方法の例が含まれています。それはあなたのために役に立つかもしれません：

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

幸運！