账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    Nuxt里插件(plugins)里怎么使用vuex？
    25
    0
    在plugins目录里定义一个插件local.js：import Vue from 'vue'import province from '@/utils/province.js'import city from '@/utils/city.js'const local = { install (Vue) { Vue.prototype.local = { // 根据英文目录检查城市是否存在 checkCity (enname) { const currentCity = city.find(item => item.enname === enname) if (currentCity !== undefined) { if (currentCity.city_id > 4) { const currentProvince = province.find(item => item.province_id === currentCity.province_id) this.$store.dispatch('setProvince', { id: currentProvince.province_id, cnname: currentProvince.cnname, enname: currentProvince.enname }) } else { this.$store.dispatch('setProvince', { id: 0, cnname: '', enname: '' }) } this.$store.dispatch('setCity', { id: currentCity.city_id, cnname: currentCity.cnname, enname: currentCity.enname }) return currentCity } else { return 0 } } } }}Vue.use(local)在store里创建index.js文件：export const state = () => ({ city: { id: 104, cnname: '厦门', enname: 'xiamen' }, province: { id: 9, cnname: '福建省', enname: 'fujian' }})export const mutations = ({ updateCity(state, city) { state.city = city; }, updateProvince(state, province) { state.province = province; }})export const actions = ({ setCity(context, city) { context.commit('updateCity', city); }, setProvince(context, province) { context.commit('updateProvince', province); }})结果提示：TypeError: Cannot read properties of undefined (reading 'dispatch')也就是说，在local.js插件里，怎么使用vuex里的actions？
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 殘缺的回憶 普通会员 1楼

      在Nuxt.js中，插件（plugins）是使用Vue.js生态系统中的生态系统中的插件库，它们允许您在您的应用程序中集成更强大的功能，如用户认证、表单验证等。

      要使用Vuex在插件中，您需要遵循以下步骤：

      1. 创建一个插件：首先，创建一个新的Vue.js文件，然后在其中编写您的插件代码。这通常涉及到编写一个组件，该组件接收Vue实例并调用Vuex的相应方法。

      2. 配置Vue Router：为了让插件与您的Vue Router关联，您需要在插件中配置Vue Router。您可以在您的Vue应用的main.js文件中添加以下代码：

      ```javascript import Vue from 'vue' import Router from 'vue-router'

      Vue.use(Router)

      new Router({ routes: [ { path: '/', name: 'home' }, { path: '/about', name: 'about' }, // 更多路由... ] }) ```

      1. 在插件中使用Vuex：现在，您可以将Vue实例和Vuex的相应方法作为参数传递给插件组件。例如：

      ```javascript import Vue from 'vue' import Vuex from 'vuex'

      Vue.use(Vuex)

      new Vuex.Store({ state: { message: 'Hello, world!' }, mutations: { setMessage(state, message) { state.message = message } }, actions: { setMessage({ commit }, message) { commit('setMessage', message) } }, getters: { getMessage(state) { return state.message } } }) ```

      1. 使用插件：现在，您可以在您的插件组件中使用Vuex的相应方法，如下所示：

      ```javascript import Vue from 'vue' import Vuex from 'vuex'

      Vue.use(Vuex)

      export default new Vuex.Store({ state: { message: 'Hello, world!' }, mutations: { setMessage(state, message) { state.message = message } }, actions: { setMessage({ commit }, message) { commit('setMessage', message) } }, getters: { getMessage(state) { return state.message } } }) ```

      以上就是在Nuxt.js中使用Vuex的基本步骤。希望这可以帮助您！

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部