Cách lấy trạng thái vuex từ tệp javascript (thay vì thành phần vue)

Question

Tôi đang làm việc với vuex (2.1.1) và làm việc trong các thành phần tệp đơn lẻ. Tuy nhiên để tránh quá nhiều cruft trong thành phần tập tin vue duy nhất của tôi, tôi chuyển một số chức năng vào một mô-đun utils.js mà tôi nhập vào tập tin vue. Trong số này utils.js Tôi muốn đọc trạng thái vuex. Làm thế nào tôi có thể làm điều đó? Vì nó có vẻ như đang tiến gần đến trạng thái với getters etc, giả sử bạn đang làm việc từ bên trong một thành phần vue, hay không?

Tôi đã cố gắng import state from '../store/modules/myvuexmodule' và sau đó tham khảo state.mystateproperty nhưng nó luôn mang lại 'không xác định', trong khi đó trong vue-devtools tôi có thể thấy thuộc tính trạng thái không có giá trị thích hợp. Ước tính của tôi vào thời điểm này là đây không phải là 'cách để đi' vì giá trị state.property trong tệp js sẽ không hoạt động và do đó sẽ không cập nhật hoặc gì đó, nhưng có thể ai đó có thể xác nhận/chứng minh tôi sai.

Answer 1

Có thể truy cập cửa hàng dưới dạng đối tượng trong tệp js bên ngoài, tôi cũng đã thêm thử nghiệm để chứng minh các thay đổi trong tiểu bang.

đây là file js bên ngoài:

import { store } from '../store/store' 

export function getAuth() { 
    return store.state.authorization.AUTH_STATE 
} 

Module nhà nước:

import * as NameSpace from '../NameSpace' 
/* 
    Import everything in NameSpace.js as an object. 
    call that object NameSpace. 
    NameSpace exports const strings. 
*/ 

import { ParseService } from '../../Services/parse' 

const state = { 
    [NameSpace.AUTH_STATE]: { 
    auth: {}, 
    error: null 
    } 
} 

const getters = { 
    [NameSpace.AUTH_GETTER]: state => { 
    return state[NameSpace.AUTH_STATE] 
    } 
} 

const mutations = { 
    [NameSpace.AUTH_MUTATION]: (state, payload) => { 
    state[NameSpace.AUTH_STATE] = payload 
    } 
} 

const actions = { 
    [NameSpace.ASYNC_AUTH_ACTION]: ({ commit }, payload) => { 
    ParseService.login(payload.username, payload.password) 
     .then((user) => { 
     commit(NameSpace.AUTH_MUTATION, {auth: user, error: null}) 
     }) 
     .catch((error) => { 
     commit(NameSpace.AUTH_MUTATION, {auth: [], error: error}) 
     }) 
    } 

export default { 
    state, 
    getters, 
    mutations, 
    actions 
} 

Các cửa hàng:

import Vue from 'vue' 
import Vuex from 'vuex' 
import authorization from './modules/authorization' 

Vue.use(Vuex) 

export const store = new Vuex.Store({ 
    modules: {   
    authorization  
    }     
})     

Cho đến nay tất cả tôi đã làm là tạo một file js xuất một hàm trả về thuộc tính AUTH_STATE của biến trạng thái authorization.

Một thành phần để thử nghiệm:

<template lang="html"> 
    <label class="login-label" for="username">Username 
     <input class="login-input-field" type="text" name="username" v-model="username"> 
    </label> 
    <label class="login-label" for="password" style="margin-top">Password 
     <input class="login-input-field" type="password" name="username" v-model="password"> 
    </label> 
    <button class="login-submit-btn primary-green-bg" type="button" @click="login(username, password)">Login</button> 
</template> 

<script> 
import { mapActions, mapGetters } from 'vuex' 
import * as NameSpace from '../../store/NameSpace' 
import { getAuth } from '../../Services/test' 

export default { 
    data() { 
    return { 
     username: '', 
     password: '' 
    } 
    }, 
    computed: { 
    ...mapGetters({ 
     authStateObject: NameSpace.AUTH_GETTER 
    }), 
    authState() { 
     return this.authStateObject.auth 
    }, 
    authError() { 
     return this.authStateObject.error 
    } 
    }, 
    watch: { 
    authError() { 
     console.log('watch: ', getAuth()) // ------------------------- [3] 
     } 
    }, 
    authState() { 
     if (this.authState.sessionToken) { 
     console.log('watch: ', getAuth()) // ------------------------- [2] 
     } 
    }, 
    methods: { 
    ...mapActions({ 
     authorize: NameSpace.ASYNC_AUTH_ACTION 
    }), 
    login (username, password) { 
     this.authorize({username, password}) 
     console.log(getAuth())    // ---------------------------[1] 
    } 
    } 
} 
</script> 

Trên nút trạng thái nhấp chuột mặc định sẽ được đăng nhập vào giao diện điều khiển. Hành động trong trường hợp của tôi dẫn đến một cuộc gọi api, dẫn đến thay đổi trạng thái nếu kết hợp tên người dùng - mật khẩu có một bản ghi.

Kết quả thành công trong việc hiển thị bảng điều khiển trong đồng hồ authState, chức năng được nhập có thể in các thay đổi được thực hiện cho tiểu bang.

Tương tự như vậy, trên một trường hợp thất bại, chiếc đồng hồ trên authError sẽ hiển thị các thay đổi đối với nhà nước