Vuex & VueJS (Đừng đột biến lưu trữ nhà nước vuex bên ngoài xử lý đột biến)

Question

Tôi đang cố gắng để tạo ra một hàm listenAuth rằng đồng hồ "onAuthStateChanged" trong căn cứ hỏa lực để thông báo cho các cửa hàng vuex khi người dùng có đăng nhập hoặc đăng xuất. Theo như tôi có thể nói, tôi chỉ sửa đổi state.authData bằng cách sử dụng trình xử lý đột biến, trừ khi tôi đang thiếu một cái gì đó?

Tôi nhận được lỗi:

[vuex] Do not mutate vuex store state outside mutation handlers. 

Dưới đây là javascript App.vue của tôi (từ thành phần của tôi)

<script> 
// import Navigation from './components/Navigation' 
import * as actions from './vuex/actions' 
import store from './vuex/store' 
import firebase from 'firebase/app' 

export default { 
    store, 
    ready: function() { 
    this.listenAuth() 
    }, 
    vuex: { 
    actions, 
    getters: { 
     authData: state => state.authData, 
     user: state => state.user 
    } 
    }, 
    components: { 
    // Navigation 
    }, 
    watch: { 
    authData (val) { 
     if (!val) { 
     this.redirectLogin 
     this.$route.router.go('/login') 
     } 
    } 
    }, 
    methods: { 
    listenAuth: function() { 
     firebase.auth().onAuthStateChanged((authData) => { 
     this.changeAuth(authData) 
     }) 
    } 
    } 
} 
</script> 

Dưới đây là hành động của tôi (changeAuth) chức năng

export const changeAuth = ({ dispatch, state }, authData) => { 
    dispatch(types.AUTH_CHANGED, authData) 
} 

Dưới đây là cửa hàng của tôi (những phần quan trọng)

const mutations = { 
    AUTH_CHANGED (state, authData) { 
    state.authData = authData 
    } 
} 

const state = { 
    authData: {} 
} 

Answer 1

Sau khi vật lộn với cùng một vấn đề, tôi thấy rằng lỗi chỉ xảy ra khi chúng tôi cố gắng để lưu trữ các dữ liệu auth/user trong tình trạng Vuex.

Thay đổi từ ...

const mutations = { 
    AUTH_CHANGED (state, authData) { 
    state.authData = authData 
    } 
} 

... để ...

const mutations = { 
    AUTH_CHANGED (state, authData) { 
    state.authData = JSON.parse(JSON.stringify(authData)) 
    } 
} 

sẽ giải quyết trường hợp của bạn.

Answer 2

Tôi cũng đã gặp phải vấn đề này. cửa hàng của tôi:

state: { 
    items: [] 
    }, 
    mutations: { 
    SetItems (state, payload) { 
     // Warning 
     state.items = payload.items 
    } 
    }, 
    actions: { 
    FetchItems ({commit, state}, payload) { 
     api.getItemsData(payload.sheetID) 
     .then(items => commit('SetItems', {items})) 
    } 
    } 

cố định nó bằng cách thay thế state.items = payload.items với:

state.items = payload.items.slice() 

The reason is that arrays are stored as references in Javascript and payload.items is likely to be changed outside Vuex. So we should just use a fresh copy of payload.items instead.

Đối với đối tượng nhà nước, sử dụng:

state.someObj = Object.assign({}, payload.someObj) 

Và đừng sử dụng JSON.parse(JSON.stringify(someObj)) vì nó là chậm hơn nhiều .