vue 组件中获取状态失败

Question

我在A组件调用commit方法更改状态然后,在B组件获取的state是初始值,并不是更改之后的值!

footer.js(state)
import * as types from '../types'

const state = {
  namespaced: true,
  footerList: [
    {
      name: '发现音乐',
      hash: '/',
      icon: 'icon-wangyiyunyinle',
      select: false
    }, {
      name: '我的音乐',
      hash: 'mineMusic',
      icon: 'icon-music',
      select: false
    }, {
      name: '朋友',
      hash: 'friend',
      icon: 'icon-19',
      select: false
    }, {
      name: '我的',
      hash: 'user',
      icon: 'icon-geren',
      select: false
    }
  ]
}

const getters = {
  footerList: (state) => {
    return state.footerList
  }
}

const mutations = {
  [types.GET_FOOTER_LIST] (state, i) {
    state
      .footerList
      .map(function (state, index) {
        state.select = false
        if (index === i) {
          state.select = true
        }
      })
  }
}

export default {
  state,
  getters,
  mutations
}

A组件
<template>
  <div class="index">
    <seach></seach>
    <div class="content">
      <router-view></router-view>
    </div>
    <Footers :footer-list="footerList"></Footers>
  </div>
</template>

<script>
import seach from "./common/Seach";
import Footers from "./common/Footer";
import {mapGetters} from "vuex";

export default {
  name: "index",
  components: {
    seach,
    Footers
  },
  computed: {
    ...mapGetters(["footerList"]),
    ...mapGetters(["navList"])
  },
  created() {
    this.$store.commit("GET_FOOTER_LIST", 0)
  },
  methods: {
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  }
};
</script>

<style lang='scss'>
</style>

然后我在B组件调用发现state都是false.

<template>
<div>
<p>这是专辑页</p>
  <h1>{{ id}}</h1>
  <Footers :footer-list="footerList"></Footers>
</div>
  
</template>

<script>
import Footers from '../components/common/Footer'
import {mapGetters} from "vuex"

export default {
  name: "playlist",
  data() {
    return {
      id: ''
    }
  },
  computed:{
    ...mapGetters(["footerList"])
  },
  created(){
    this.id = this.$route.params.id
    
    console.log(this.$store)
  },
  components:{
    Footers
  }
};
</script>

<style>

</style>

我已经在全局注册了store 为什么我在B组件里获取的全部都是false,我测了一下好像别的state在其他页面也获取不到值

Answer 1

你 mutation 这样修改并不能触发响应式更新。
给你改造一下。

  [types.GET_FOOTER_LIST] (state, i) {
    state.footerList = state.footerList.map((val, index) => {
      return {...val, select: index === i? true : false}
    })
  }