Vuex action not works with namespaced inside Nuxt fetch

Viewed 207

I am building my own small project. When i try to access states from main store (index.js) inside of nuxt fetch method all works fine, but while i am trying to access from namespaced(store/photos.js) store it wont work. Here is my code.

store/index.js ( Works )

export const state = () => ({
    fetchedData: []
})


export const mutations = {
    setData: (state, data) => {
        state.fetchedData = data;
    }
}

export const actions = {
    async get(vuexContext) {
        const requestedData = await this.$axios.get("https://jsonplaceholder.typicode.com/users");
        vuexContext.commit('setData', requestedData.data);
    },
}

my Component:

<script>
import { mapState, mapActions } from 'vuex'
export default {
  
  async fetch({ error,store })
  {
    try {
      await store.dispatch('get');
    } catch (error) {
      console.log(error);
    }   
  },
  computed: {
    ...mapState(['fetchedData'])
  }
};
</script>

store/photos.js ( Does not works )

export const state = () => ({
  list: []
});

export const mutations = {
  setPhotos(state, data) {
    state.list = data;
  }
};

export const actions = {
  async getPhotos(vuexContext, context) {
    const requestedData = await this.$axios.get(
      "https://jsonplaceholder.typicode.com/photos"
    );
    vuexContext.commit("setPhotos", requestedData.data);
    
  }
};

Same Component but modified

<script>
import { mapState, mapActions } from 'vuex'
export default {
  
  async fetch({ error,store })
  {
    try {
      await store.dispatch('photos/getPhotos');
    } catch (error) {
      console.log(error);
    }      
  },
  computed: {
    ...mapState({
      list : 'photos/list'
    })
  }
};
</script>

Thanks in advance.

1 Answers
 namespaced: true,

You can add this to your index.js file. Hope this will work.

Reference link: Try this

Related