Gandalf
Gandalf

Reputation: 13693

Using vuex PersistedState with vuex modules

I want to use PersistedState https://github.com/robinvdvleuten/vuex-persistedstate with vuex but i can't get to setup correctly.

I have this module inside the store directory

export const auth = {
  namespaced: true,
  state: {
  },
  getters: {
    countLinks: state => {
      return state.links.length
    }
  },
   mutations: {
    SET_LINKS: (state, links) => { 
      state.links = links;
    },
   //Synchronous
    ADD_LINK: (state, link) => {
      state.links.push(link)
    },
    REMOVE_LINK: (state, link) => {        
      state.links.splice(link, 1)
    },
    REMOVE_ALL: (state) => {                     
      state.links = []
    }
  },
  actions: {
  //Asynchronous
    removeLink: (context, link) => {
      context.commit("REMOVE_LINK", link)
    },
    removeAll ({commit}) {                       
      return new Promise((resolve) => {
        setTimeout(() => {
          commit('REMOVE_ALL')
          resolve()
        }, 1500)
      })
    }
  }
}

I have named this àuth.js

This is my index.js file also inside store directory

import { createStore } from 'vuex'
import createPersistedState from "vuex-persistedstate"
import { auth } from './auth'


const dataState = createPersistedState({
  paths: ['data']
})

const store = createStore({
  modules: {
    auth
  },
  plugins: [dataState]
})

I have a total of 7 modules i would like to load and use in various places in my application. To kick things off i just want to load auth module and use it in my home.vue page

This is the script section of my home.vue

import Footer from '@/components/Footer.vue'
import Header from '@/components/Header.vue'
import { mapGetters} from 'vuex'
import store from '../store';



export default {
  name: 'Home',
  components: {
     Footer,Header
  },
  mounted () {
  var links  = ['http://google.com','http://coursetro.com','http://youtube.com'];
  store.commit('SET_LINKS', links);
},
  computed: {
    ...mapGetters([
      'countLinks'
    ]),
  }
}

This is my main.js file

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import i18n from './i18n'
import FlagIcon from 'vue-flag-icon'
import {store} from './store';


   
createApp(App).use(i18n).use(FlagIcon).use(store).use(router).mount('#app')

When i npm run serve, i get the error

10:7 error 'store' is assigned a value but never used no-unused-vars

How should i correct this to be able to use auth.js module anywhere in my application?

Upvotes: 1

Views: 603

Answers (0)

Related Questions