<template> <div> <button @click="add">+</button> ++++ <button @click="add_action">action +</button> ++++ <h2>{{count}}</h2> <button @click="sub">-</button> <div> test: {{doneTodos[0].text}} <br> length: {{doneTodosLength}} </div> </div> </template> export default { methods:{ add(){ this.$store.commit('add'); // console.log(this); }, sub(){ this.$store.commit('sub'); }, ++++ add_action(){ this.$store.dispatch('add'); } ++++ } }
看到这里有没有想过当我们使用state中某一个数据时，我们只想用该数据中符合条件的数据。比如：
state:{ count:0, todos: [ { id: 1, text: 'text1--true', done: true }, { id: 2, text: 'text2--false', done: false } ] }
此时我们只想获取state.todos中done为true的数据时我们应该怎么获取？
可能会有以下两种方案:
1.每个在组件中首先获取todos,然后使用filter方法过滤；
2.写一个公共函数在每个组件中调用以下；
如果用到todos中done为true的组件很多，这两种方法都是很不理想的。Vuex为此为我们引入了一个方法Getter。
Getter 用法
官方解释：Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
在sore\index.js写入：
mutations:{ // 更改数据的方法 add(state){ state.count++ }, sub(state){ state.count-- } }, +++ getters:{ // 用法类似组件中的 computed, 可以认为是store的计算属性 doneTodos:state => { // Getter 接受 state 作为其第一个参数： return state.todos.filter(todo => todo.done) // -> [{ id: 1, text: 'text1--true', done: true }] }, // Getter 也可以接受其他 getter 作为第二个参数 doneTodosLength:(state,getters) => { return getters.doneTodos.length // -> 1 }, +++ }
组件(HelloWorld.vue)中使用getters里对应的方法：
<template> <div> <button @click="add">+</button> <h2>{{count}}</h2> <button @click="sub">-</button> +++ <div> test: {{doneTodos[0].text}} <br> length: {{doneTodosLength}} </div> +++ </div> </template> <script> export default { //... computed:{ +++ doneTodos(){ return this.$store.getters.doneTodos // -> [{ id: 1, text: 'text1--true', done: true }] }, doneTodosLength(){ return this.$store.getters.doneTodosLength // -> 1 } +++ } } </script>
本篇代码地址： github.com/xioasa/vue-…
总结
以上所述是小编给大家介绍的vuex 渐进式教程实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！