關(guān)于list組件點擊到info組件詳情中報錯 state is not defined，如果刪去store.commit(),不報錯但又顯示全部列表內(nèi)容
List.vue
<template>
<div>
?<ul>
? <li v-for="(item, index) in pageLists"
? ?:key = "index"
? ?@click="more(index)"
>
? ? {{index}} - {{ item.title }} - {{ item.content }}
? ?</li>
? ?</ul>
</div>
</template>
<script>
import store from '@/store'
export default {
name:'list',
store,
methods: {
? ?more(index){
? ? ? store.commit('detail', index)
? ? ?this.$router.push('/info')
}
},
computed: {
? ? pageLists(){
? ? ? return store.state.lists
? ? ?}
? ?},
}
</script>
<style scoped>
</style
Info.vue
<template>
<div>
? ?<div v-for="(item, index) in pageLists"
? ? ? ? ? ?:key="index"
? ? ? ? ? v-show="index == current">
? ? ? ?<span>{{item.title }}</span>
? ? ? ?<p>{{ item.content }}</p>
? ?</div>
</div>
</template>
<script>
import store from '@/store'
export default {
? ?name:'info',
? ?store,
? ?data(){
? ?return {
? ? }
? ?},
? computed:{
? ?pageLists(){
? ? ? ?return store.state.lists
? ?},
? ?current(){
? ? ?return store.state.number
? }
}
}
</script>
<style scoped>
</style>
store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
export default new Vuex.Store({
? ? ?state: {
? ? ? ? ?lists:[],
? ? ? ? number:null
? ? ?},
? ?mutations: {
? ? ? addList(state, value){
? ? ? ? ?state.lists.push(value)
? ? ?},
? ? detail(index){
? ? ? state.number = index
? ?}
},
actions: {
},
});
2019-05-07
我覺得是你store.js里面，detail方法沒有接受 state 作為第一個參數(shù)：
detail(state,index){
? ? ? state.number = index
}
vuex-mutations你可以看一下文檔