Question

对不起我的英语，我如何在其他js文件中使用nuxt项目中的vuex.store

在商店

export const state = () => ({
  token: 'test',
  name: '',
  avatar: ''
}),
export const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token
  }
},
export const getters = {
  token: state => {
    return state.token
  }
}

在test.js中

export function() => {
    //how can i updata vuex token?
}
export function() => {
    //how can i getter vuex token?
}

export default ({ app, store, route, redirect }) => {
    some code
}

它不起作用

想知道这样做是否是一种好习惯，什么是最好的方法？

Answer 1

基本实现看起来像这样

import { mapState, mapGetters, mapActions } from 'vuex'
export default {
    computed: {
       // you only need State OR Getter here not both!!! You don't need a 
       // getter for just returning a simple state
       ...mapState('yourStoreName', ['token'])
       ...mapGetters('yourStoreName', ['token']),
    },
    methods: {
       methodThatNeedsToChangeState (){
          this.setToken('newToken')
       },
       ...mapActions('yourStoreName', ['setToken']),
    }
}

尽管在您的商店中您需要采取措施，但您不直接调用突变！因为突变不能是异步的。

export const actions = {
   setToken: (context, token) => {
      context.commit(SET_TOKEN, token)
   }
},

我强烈建议您更详细地研究Vuex文档。 https://vuex.vuejs.org/guide/

在nuxt项目中，其他文件分别引入商店

1 个答案: