nuxt 使用vuex错误:Do not mutate vuex store state outside mutation handlers.

场景
项目A升级改造,需要用到另一个B项目的其中一个模块,A项目使用的是nuxt,而B项目使用的是原生vue, 合并的时候,直接将B项目对应的store文件复制到了A项目的store目录下,运行时,报错:
Do not mutate vuex store state outside mutation handlers.

分析
我们都知道无论是vuex,redux还是mobx,都有严格模式和非严格模式,区分就是能不能直接修改store到处的state,严格模式下是不允许的,只能通过action,mutation去修改,而非严格模式下才可以直接修改state数据。上面报错就是因为在严格模式下直接修改了state数据。

解决
分析了原因之后,着手解决,因为nuxt默认在开发模式的时候开启严格模式,打开nuxt官网,搜索到所有严格模式相关的内容如下

默认情况下,在开发模式下启用严格模式,在生产模式下关闭模式。要在dev中禁用严格模式,请遵循以下示例。

Module Mode
export const strict = false

于是我在从B项目引入的模块文件下加入:

export const strict = false

我的想法是,因为这个模块有state被直接修改,那个申明这个模块为非严格模式。

保存,重启项目,继续报错。

无奈继续寻找原因,后来看见有人说:

要在store/index.js添加export const strict = false

突然明白了,在原生的vuex配置重,strict这个配置是在new Vuex.Store()是传入的配置,而modules中并没有这个配置项,也就是说,要么整个store都是严格模式,要么都是非严格模式,不存在一个模块是严格模式,另一个模块是非严格模式这种操作,但是nuxt中并没有提供我们配置store的地方,store/index.js的配置应该就是对应store的顶级配置吧。
查看了我的目录结构,发现并没store/index.js文件,于是新建store/index.js,添加

export const strict = false

保存,重启,错误消失。
但是此时整个store都是非严格模式,并不是优雅的解决方案,建议开发环境下还是使用严格模式。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Nuxt.js中使用Vuex,你需要按照以下步骤进行设置: 1. 首先,你需要在nuxt.config.js文件中添加Vue插件配置。你可以通过在plugins数组中添加一个对象来实现。这个对象应该具有src属性,指向你的插件文件的路径,并且ssr属性设置为false,以确保插件只在客户端渲染时执行。例如,你可以添加以下代码到nuxt.config.js中: plugins: [ { src: '~/plugins/store-cache', ssr: false }, ], 2. 接下来,你需要创建一个Vuex store文件。你可以在store目录下创建一个index.js文件,并在其中导入Vuex并创建一个新的store实例。例如: import Vuex from 'vuex' const createStore = () => { return new Vuex.Store({ state: { // 在这里定义你的状态 }, mutations: { // 在这里定义你的mutations }, actions: { // 在这里定义你的actions }, getters: { // 在这里定义你的getters } }) } export default createStore 3. 现在,你已经设置好了Vuex store。你可以在Vue组件中使用store的状态、提交mutations和触发actions了。在你的组件中,你可以通过使用$store对象来访问store。例如,你可以在computed属性中使用$store.state来获取状态,或使用$store.commit来提交一个mutation。例如: export default { computed: { currentUser() { return this.$store.state.user } }, methods: { updateUser() { this.$store.commit('updateUser', { name: 'John Doe' }) } } } 这就是在Nuxt.js中使用Vuex的基本方法。通过设置插件配置和创建store实例,你可以在你的Vue组件中使用Vuex的状态管理功能。 <span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [nuxt-stash:Nuxt.js的Vuex存储的轻量级替代](https://download.csdn.net/download/weixin_42106299/18828526)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [Nuxt.js做Vuex数据持久化](https://blog.csdn.net/FitnessSnail/article/details/130646101)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [nuxt-typescript-demo:在Nuxt.js上使用Typescript和vuex-module-decorators的示例](https://download.csdn.net/download/weixin_42134537/18713370)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值