Repository nuxt.js

VanyllaGorylla
3
VanyllaGorylla
commented 7 months ago

Hello,
Please go to https://nuxtjs.org/guide/vuex-store#modules-mode.
Example for modules does not work because it is missing with namespaced: true, for todos module.

new Vuex.Store({
  state: { counter: 0 },
  mutations: {
    increment (state) {
      state.counter++
    }
  },
  modules: {

    todos: {
      namespaced: true, // <-------------<=== this line is missing
      state: {
        list: []
      },
      mutations: {
        add (state, { text }) {
          state.list.push({
            text,
            done: false
          })
        },
        remove (state, { todo }) {
          state.list.splice(state.list.indexOf(todo), 1)
        },
        toggle (state, { todo }) {
          todo.done = !todo.done
        }
      }
    }
  }
})

Without it methods become global and they are not accessible by their namespace. IE 'todos/toggle'.

Best regards, Arczik!

1
marc-bouvier
0
marc-bouvier
commented 7 months ago

I am trying to use namespaced store for I18n. And I get something similar.
I modified official nuxt i18n sample as follows.

I get the following error :
image

In plugins/i18n.js, I changed locale: store.state.locale to locale: store.i18n.state.locale

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

export default ({ app, store }) => {
    // Set i18n instance on app
    // This way we can use it in middleware and pages asyncData/fetch
    app.i18n = new VueI18n({
        locale: store.i18n.state.locale,
        fallbackLocale: 'en',
        messages: {
            'en': require('~/locales/en.json'),
            'fr': require('~/locales/fr.json')
        }
    })

    app.i18n.path = (link) => {
        if (app.i18n.locale === app.i18n.fallbackLocale) {
            return `/${link}`
        }

        return `/${app.i18n.locale}/${link}`
    }
}

store/index.js

export const state = () => ({})
export const mutations = {}

store/i18n.js

export const state = () => ({
  locales: ['en', 'fr'],
  locale: 'en'
})

export const mutations = {
  SET_LANG(state, locale) {
    if (state.locales.indexOf(locale) !== -1) {
      state.locale = locale
    }
  }
}

In middleware/i18n.js, I changed store.state.locales to store.i18n.state.locales and store.commit('SET_LANG', locale) to store.commit('i18n/SET_LANG', locale).

export default function({ isHMR, app, store, route, params, error, redirect }) {
    // If middleware is called from hot module replacement, ignore it
    if (isHMR) return
        // Get locale from params
    const locale = params.lang || 'en'
    if (store.i18n.state.locales.indexOf(locale) === -1) {
        return error({ message: 'This page could not be found.', statusCode: 404 })
    }
    // Set locale
    store.commit('i18n/SET_LANG', locale)
    app.i18n.locale = store.i18n.state.locale
        // If route is /en/... -> redirect to /...
    if (locale === 'en' && route.fullPath.indexOf('/en') === 0) {
        return redirect(route.fullPath.replace(/^\/en/, '/'))
    }
}

I didn't change nuxt.config.js.

module.exports = {
  loading: { color: 'cyan' },
  build: {
    vendor: ['vue-i18n']
  },
  router: {
    middleware: 'i18n'
  },
  plugins: ['~/plugins/i18n.js'],
  generate: {
    routes: ['/', '/about', '/fr', '/fr/about']
  }
}
0
galvez
845
galvez
commented a month ago

@manniL I'll double check docs for this.

0
Informations
QuestionUnresolved
#c2474 - Created 7 months ago