Vuex的简单使用

1. 需求背景

我现在从home页面拿到了list数据，我需要过滤一下，如果facilityType为16，那么就把所对应的对象存在vuex里面，然后在about页面读vuex，拿到对应的数据渲染

2. 实现方式

const state = {
  facilityData: {}
}
const getters = {}
const mutations = {
  SET_FACILITY_DATA (state, payload) {
    state.facilityData[payload.id] = payload.data
  }
}
const actions = {
  setFacilityData ({ commit }, payload) {
    commit('SET_FACILITY_DATA', payload)
  }
}
export default {
  state,
  getters,
  mutations,
  actions
}

import Vue from 'vue'
import Vuex from 'vuex'
import facility from './facility'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {

  },
  getters: {
  },
  mutations: {

  },
  actions: {

  },
  modules: {
    facility
  }
})

<template>
  <div class="homeView">
    <div v-for="item in list" :key="item.jsaCode">
      {{item.jsaName}}
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data () {
    return {
      list: [
        {
          facilityType: '16',
        },
        {
          facilityType: '13',
        },
        {
          facilityType: '16',
        }
      ]
    }
  },
  computed: {
    filteredList () {
      return this.list.filter(item => item.facilityType === '16')
    }
  },
  methods: {
    ...mapActions(['setFacilityData']),
    handleFilteredList () {
      this.filteredList.forEach(item => {
        // 存到store中
        this.setFacilityData({ id: item.facilityId, data: item })
      })
    }
  },
  mounted () {
    this.handleFilteredList()
  }
}
</script>

<style lang="scss" scoped>

</style>

<template>
  <div>
    <div v-for="(item, index) in facilityData" :key="index">
      <p>{{ item.jsaName }}</p>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      facilityData: state => state.facility.facilityData
    })
  }
}
</script>