在另一个组件中调用状态 Vue.js

Question

我想知道如何调用另一个组件中更新状态的内容？

我有一个 auth.js 文件：

state: {
  admin: [],
  token: '' // token default null
},
actions: { 
  async authIN({ commit }, admin) {
    try {
      ...
      commit('SET_TOKEN', response.data.token) // after submit
      ...
    } catch (err) {
      console.log(err);
    }
  }
},
mutations: {
  SET_TOKEN(state, newtoken) {
    state.token = newtoken;
    console.log("this-> new token ", state.token) // token already has its contents
  }
},
getters: {
  settokens: state => state.token
},

并在 app.vue 中：

<v-app class="grey--text text--darken2" id="defaultFont">
  <v-main>
    <h2>ini , {{token}}</h2>
    <router-view />
  </v-main>
</v-app>

import { mapGetters } from "vuex";
export default {
  data: () => ({
    drawer: true,
    token:''
  }),
  components: {
    NavA,
    Loader,
    NavB,
  },
  mounted () {
    this.settokens()
  },
 computed: {
   ...mapGetters('Auth',['settokens'])
 },
};

如何将 auth.js 中状态令牌的内容传递给 app.vue？我正在使用 Vuex 版本 2。你能帮我吗？

Answer 1

在 app.vue 你可以导入你的 Vuex getters:

import { mapGetters } from 'vuex';

然后，在computed：

computed: {
  ...mapGetters(['settokens'])
}

这样您就可以从 app.vue 的任何地方访问它。

在另一个组件中调用状态 Vue.js

Call state in another component Vue.js

javascript

vue.js

vuex