鍍金池/ 問(wèn)答/iOS  HTML/ vue 組件中獲取狀態(tài)失敗

vue 組件中獲取狀態(tài)失敗

我在A組件調(diào)用commit方法更改狀態(tài)然后,在B組件獲取的state是初始值,并不是更改之后的值!

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

const state = {
  namespaced: true,
  footerList: [
    {
      name: '發(fā)現(xiàn)音樂(lè)',
      hash: '/',
      icon: 'icon-wangyiyunyinle',
      select: false
    }, {
      name: '我的音樂(lè)',
      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組件調(diào)用發(fā)現(xiàn)state都是false.

<template>
<div>
<p>這是專輯頁(yè)</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>

clipboard.png
我已經(jīng)在全局注冊(cè)了store 為什么我在B組件里獲取的全部都是false,我測(cè)了一下好像別的state在其他頁(yè)面也獲取不到值

回答
編輯回答
萌面人

你 mutation 這樣修改并不能觸發(fā)響應(yīng)式更新。
給你改造一下。

  [types.GET_FOOTER_LIST] (state, i) {
    state.footerList = state.footerList.map((val, index) => {
      return {...val, select: index === i? true : false}
    })
  }
2017年1月18日 13:28