Vuex thu khí-tính Failure khi sử dụng vue-router - họ không có phản ứng

Question

Thứ nhất, có user.js, đó là một trong những mô-đun cho store.js

const state = { 
    isLogin: false 
} 

const mutations = { 
    login(state, userid){ 
    state.userid = userid; 
    } 
} 

export default { 
    state, 
    mutations 
} 

Sử dụng Vue-router, tôi đã tạo ra một phần App và nhập store.js.
Và sau đó đến Hợp phần login.vue. Sau đây là một phần của mã:

<script>  
export default { 
    vuex: { 
    actions: { 
     login // this action changes the state of 
       // isLogin by dispatch `login` mutation 
    } 
    }, 

    methods: { 
    btnClick(){ 
     // here calls the login action 
    } 
    } 
} 
</script> 

Tôi nhận thấy rằng phương pháp btnClick có thể hoạt động trong thành phần này. Nó đã thay đổi store.state.user.isLogin.

Nhưng đây là một thành phần a.vue nghe tình trạng isLogin:

<template> 
... 
    <a 
    v-if="isLogin" 
    v-link="'#'"> 
    ... 
    </a> 
... 
</template> 

<script> 
// import something 
export default { 
    vuex: { 
     getters: { 
     isLogin: ({ user }) => user.isLogin 
     } 
    } 
} 
</script> 

Khi btnClick toggled trong login.vue, các isLogin thay đổi. Nhưng có vẻ như rằng mặc dù getter isLogin trong a.vue đã được thay đổi, các v-if trong <a> không thể phản ứng, vì <a> không xuất hiện.

Tôi đã thử kiểm tra nếu store được tiêm vào thành phần con và kết quả là nó đã trôi qua. Ngoài ra, tôi đã cố gắng sử dụng computed thay vì getters để nghe isLogin và không thể phản hồi. khi thêm isLogin vào các thuộc tính watch, nó không thể xem được.

Và có một điều mà tôi khá chắc chắn - không thể bỏ qua Vue.use(Vuex).

Tôi đã tự hỏi liệu đó có phải là Vue-router gây ra sự cố không.
Và dường như không có ai đã đặt câu hỏi về vuex với vue-router ...

Answer 1

Tôi đang sử dụng vuex với vue-router và vue-resource (nếu bạn đang sử dụng chứng thực tôi cho rằng bạn đang làm cho các yêu cầu HTTP) và nó hoạt động giống khỏe.

Tôi nghĩ rằng vấn đề của bạn là khai báo getter của bạn. Getters nhận được state bên trong đối tượng store và trong tuyên bố cửa hàng của bạn Tôi không thấy tùy chọn isLogin là tài sản của user. Tôi sẽ thay đổi getter của bạn này.

vuex: { 
    getters: { 
    isLogin: state => state.isLogin 
    } 
} 

Answer 2

Bạn đang cập nhật isLogin ở bất kỳ đâu? Bạn đang đăng nhập người dùng bằng cách đặt thuộc tính không tồn tại trên state được gọi là userid và không đặt state.isLogin ở bất kỳ đâu. Tôi không biết nếu thiết lập mà không khai báo tài sản sẽ làm việc, và cũng thường trong Vue một biến phải được khai báo từ đầu để được đáp ứng.Nên hình như:

const state = { 
    isLogin: false, 
    userid:0 
} 

const mutations = { 
    login(state, userid){ 
    state.userid = userid; 
    state.isLogin = true; 
    } 
} 

Answer 3

như Jeff nói, đối với vấn đề của tôi, tôi cũng làm cho một mô-đun, vì vậy chúng ta phải làm cho nó như thế này state.user.isLogin