Using Vuex State in main js-CodePudding

I am trying to use my store state in main.js but it vanishes my component, can I use state in mian.js

Axios.defaults.headers.common['BranchId'] = this.$store.state.myBrachId,

if not what how can I set the default headers dynamically then..?

CodePudding user response：

You're asking how to access a Vuex store outside a Vue component. The syntax that you're currently using is only valid if you're writing a Vue component.

In case you want to access Vuex outside (any .js file) you should, first, export the store. Then, import that store in your file and finally use the store as you place.

Let's see an example:

store/index.js

export const store = new Vuex.Store({
 state () {
  myBrachId: 'niceBranch007'
 }
});

Then, in any other .js file (main.js in your case)

import { store } from 'store/index.js'
console.log(store.state.myBrachId)

CodePudding user response：

I am doing this right now this is my store

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {

    branchId: "",
  },
  getters:{
  
  },
  mutations: {
    
  },
  actions: {},
  modules: {}
});

In header cmponent

this.$store.state.branchId = this.Branches[index].branchId;

in main js

import Axios from 'axios'
import { store } from './store/index'
Axios.defaults.headers.common['BranchId'] = store.state.branchId;

this is not setting axios header, it comes empty