Vue学习笔记：Vuex Part04 Getter

Getter可以将store的state派生出一些状态，比如根据条件进行过滤

Getter 接受 state 作为其第一个参数，示例：

const store = createStore({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos (state) {
      return state.todos.filter(todo => todo.done)
    }
  }
})

通过属性访问

Getter 会暴露为 store.getters 对象，可以以属性的形式访问这些值

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

Getter 也可以接受其他 getter 作为第二个参数：

getters: {
  // ...
  doneTodosCount (state, getters) {
    return getters.doneTodos.length
  }
}

通过方法访问

也可以通过让 getter 返回一个函数，来实现给 getter 传参。

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

示例

在上文中deptList的值为，可以通过type来进行过滤。

{"id": 1, "name": "mainten", "type": 'support'},
        {"id": 2, "name": "hr", "type": 'support'},
        {"id": 3, "name": "T1", "type": 'dev'},
        {"id": 4, "name": "T2", "type": 'dev'},
        {"id": 5, "name": "T3", "type": 'dev'},
        {"id": 6, "name": "T4", "type": 'dev'}

store/index.js

// 1页面有多个需要共享的状态，引入vuex，便于维护（非父子通信）
// 2缓存部分异步数据，减少后端服务的访问，增加体验

import { createStore } from 'vuex'
import axios from 'axios'
import { ssrContextKey } from 'vue'

const store = createStore({
    state() {
        return {
            count: 0,
            datadept: []
        }
    },
    mutations: {
        increment(state) {
            state.count++
        },
        setcount(state, payload) {
            state.count = payload
        },
        setdatadept(state, payload) {
            state.datadept = payload
        }
    },
    actions: {
        async getDataDept(context) {
            if (context.state.datadept.length === 0) {
                console.log("length is 000")
                const res = await axios.get('http://127.0.0.1:5000/api/test/jsontest/Depts')
                console.log(res.data.msg)
                context.commit("setdatadept", res.data.msg)
            }

        }
    },
    getters: {
        filterDept: (state) => (deptype) => {
            return state.datadept.filter(item => item.type === deptype)
        }
    }
}
)
export default store

在这里先不使用getter方法

deptList 使用computed实现相同的功能

<template>
    <ul>
        <select v-model="type">
            <option value="support">support</option>
            <option value="dev">dev</option>
        </select>
        <li v-for="d in data" :key="d.id" @click="routeClick(d.id)">{{ d.name }}</li>
    </ul>
</template>
<script setup>
import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex'

const type = ref('support')
const store = useStore()
const router = useRouter()

const routeClick = (userid) => {
    router.push('detail/' + userid)
}

const  data=computed(()=>{
    return store.state.datadept.filter(d => d.type === type.value)
})
onMounted(
    () => {
        store.dispatch('getDataDept')
    }
)
</script>

使用getter实现

需要创建 computed 引用以保留响应性，这与在选项式 API 中创建计算属性等效。

<template>
    <ul>
        <select v-model="type">
            <option value="support">support</option>
            <option value="dev">dev</option>
        </select>
        <li v-for="d in data" :key="d.id" @click="routeClick(d.id)">{{ d.name }}</li>
    </ul>
</template>
<script setup>
import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex'

const type = ref('support')
const store = useStore()
const router = useRouter()

const routeClick = (userid) => {
    router.push('detail/' + userid)
}

// const  data=computed(()=>{
//     return store.state.datadept.filter(d => d.type === type.value)
// })
const data = computed(()=>store.getters.filterDept(type.value))
onMounted(
    () => {
        store.dispatch('getDataDept')
    }
)
</script>