nuxt踩坑之Vuex状态树的模块方式使用详解

初次看到这个模块方式,感觉很是新奇,之前的vuex状态树使用方法用的也有些腻了,就想来实践一发新的东西

废话不多说,直接进入正题

Vuex状态树-模块方式官方文档解读

状态树还可以拆分成为模块,store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块

  1. 这句话啊,看了半天,我都没绕出来。之前一直用的是store目录下文件为:index.js、state.js、mutations.js、actions.js。后三个是index.js的子模块,你说这每个js文件都是一个模块?懵逼一分钟
  2. 继续往下:使用状态树模块化的方式,store/index.js 不需要返回 Vuex.Store 实例,而应该直接将 state、mutations 和 actions 暴露出来。 到这里我虽然还懵逼着,但是转念一想,nuxt还有这操作,都不用我们自己辛辛苦苦写export default store = () => new Vuex.Store({}) 了,倒也真的省事儿呢
  3. 还是继续看例子吧,官方给的这个,看了一遍没看懂(笨小孩的世界真滴难),你这index.js不是Vuex默认的store文件么,再来一todos.js,同样暴露出去的对象,不应该是index.js同级的么
  4. 重点来了,看不会不要紧,照猫画虎我还是会滴~

照猫画虎

// store/index.js
export const state = () => ({
 num: 0
})

export const mutations = {
 increment (state) {
  state.num ++
 },
 decrement (state) {
  state.num --
 }
}

// store/plus.js
export const state = () => ({
 plusNum: 1
})

export const mutations = {
 plus (state) {
  state.plusNum ++
 }
}

// store/minus.js
export const state = () => ({
 minusNum: 10
})

export const mutations = {
 minus (state) {
  state.minusNum --
 }
}

// pages/store.vue
<template>
 <section class="container">
  <table>
    <tr>
      <td colspan=4>vuex状态树使用</td>
    </tr>
    <tr>
      <td>页内数据</td>
      <td>index.js</td>
      <td>plus.js</td>
      <td>minus.js</td>
    </tr>
    <tr>
      <td>{{ count }}</td>
      <td>{{ $store.state.num }}</td>
      <td>{{ $store.state.plus.plusNum }}</td>
      <td>{{ $store.state.minus.minusNum }}</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
 </section>
</template>

跑一下,唷!报错了,我说同学们啊,我写的真的没有错!!!

好吧,报错内容:[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

意思是我客户端和vue SSR生成的DOM不一样,客户端不也是SSR生成的,这是个问题,有知道的大佬,希望可以告诉我。

不过这个问题我倒是解决了,虽然不知道问什么-_-!,把那一大堆的tr标签都放到tbody里面就OK了

跑起来,没问题,按示例的写法,这样成功拿到了state的数据

接着试试mutation的方法

<tr class="mutation-fun">
  <td @click="count ++">count ++</td>
  <td @click="$store.commit('increment')">increment</td>
  <td @click="$store.commit('plus')">plus</td>
  <td @click="$store.commit('minus')">minus</td>
</tr>

报错:[vuex] unknown mutation type: plus

修改下:

<tr class="mutation-fun">
  <td @click="count ++">count ++</td>
  <td @click="$store.commit('increment')">increment</td>
  <td @click="$store.commit('plus/plus')">plus/plus</td>
  <td @click="$store.commit('minus/minus')">minus/minus</td>
</tr>

搞定~

自己先小结下这个模块怎么用的吧

nuxt很贴心的帮我们省去了返回Vuex实例的代码,我们可以不用去写了
只有store文件夹下的index.js是一级的vuex状态,其他的js文件都是二级的状态树。(能不能有三级的我不知道,不过感觉没必要,哈哈哈!!)

每个状态树文件都可以包含state,mutation,action

使用二级状态树的state用: $store.state.文件名.变量名

使用二级状态树的mutation用: $store.commit(‘文件名/变量名')

使用二级状态树的action用: $store.dispatch(‘文件名/变量名')

官方示例没有提到的

二级状态树能调用一级状态树的state和mutation以及action吗?

我们来给plus.js增加一个修改index.js中的state的方法plusIndex

export const state = () => ({
 plusNum: 1
})

export const mutations = {
 plus (state) {
  state.plusNum ++
 },
 plusIndex (state) {
  state.num ++
  console.log('点击递增index的num')
 }
}

去试着调用了一下,文本打印出来了,也没有报错,但是完全获取不到index中的num哇~~

这次聪明点儿,我直接把state打印出来:

export const state = () => ({
 plusNum: 1
})

export const mutations = {
 plus (state) {
  state.plusNum ++
 },
 plusIndex (state) {
  console.log('state: ', state)
  state.num ++
 }
}

跑一下试试: 结果有点儿让人想哭:state: {num: NaN, plusNum: 1}。再看看页面上index.js对应的num依然是0,这就说明我们这里的num不是index.js里的num,而是下面state ‘.'(点)出来的num,并且没有给初始值就执行了一次 ++ ,所以值为NaN

到这里,我已经大概猜测到了这里的弯弯绕是怎么回事儿了 –> 模块儿的作用域是本文件内。但编程不是靠猜的,要用实践证明的才是对的,下面在深究这个问题

反过来,一级状态树能调用二级状态树的state和mutation以及action吗?

这里的情况跟上面一样,既然我们的这个store是模块方式生成的,那就要遵循模块化的规范,变量作用域只能在文件内

通过模块化编程规范来获取一级状态树的state

先把index.js引过来,因为不放心引用过来的还是不是原来那个index.js,所以把它打印出来看看

const indexVuex = require('./index.js')
console.log('indexVuex: ', indexVuex)

这下不就炸了嘛,我引过来的居然是一个空的vuex状态树!!!内容长这样子

{
  mutation: {},
  modules: {
    plus: {
      mutation: {},
      namespaced: true
    },
    minus: {
      mutation: {},
      namespaced: true
    }
  },
  namespaced: true
}

好吧,我这个用模块化的方式来使用其他文件内的变量的想法也是泡汤了

最后的让步,我在组件中调用状态树时再去用二级状态树的方法修改一级状态树的state,先试试:

// plus.js
export const state = () => ({
 plusNum: 1
})

export const mutations = {
 plus (state) {
  state.plusNum ++
 },
 plusIndex (state, meio) {
  meio ++
  console.log('meio: ', meio)
 }
}

// 调用:
<td @click="$store.commit('plus/plusIndex', $store.state.num)">递增index的num</td>

点击后,依然没能修改index.js中的num,查看打印结果中一直都是1,也就是说我们传进去的是基本数据类型的0~~

那修改一下,我们传进去一个引用数据类型的看看可以不

// plus.js
export const state = () => ({
 plusNum: 1
})

export const mutations = {
 plus (state) {
  state.plusNum ++
 },
 plusIndex (state, meio) {
  meio.num ++
  console.log('meio: ', meio.num)
 }
}

// 调用:
<td @click="$store.commit('plus/plusIndex', $store.state)">递增index的num</td>

功夫不负有心人,终于是成功了,虽然这样很麻烦,但也起到了效果

这里经验证:反过来一级状态树调用二级状态树也是一样的,代码就不贴了

小结一下

  1. vuex状态树的模块写法,不同的文件之间不能直接引用
  2. vuex状态树使用模块加载引用,得到的是一组命名空间,而不是最终生成的Vuex模块文件
  3. 要通过b文件修改其他文件的state需要在store外部去修改

最后,小小的STAR下

情境(situation):粗略的看完一遍NUXT的官方文档,回头把不太清楚的东西再整理一下,这儿就卡在Vuex状态树的的模块写法上

任务(task):通过各种方法弄明白NUXT的Vuex状态树的模块写法是怎么实现的

行动(action):第一步,参照官方示例先让自己的状态树能运行起来;第二步,与普通写法的状态树写法比较并举一反三,看看模块写法和普通写法的状态树在使用上有什么区别和需要注意的

结果(result):第一,学会了vuex状态树的模块写法和用法;第二,通过探索store目录下的不同文件之间是否可以互相引用以及模块引用来熟悉模块方式的写法和普通方式的区别,也找到了模块写法中修改其他模块的state的方法;第三,模块写法的优点:写法简单,结构清晰明了,符合现在模块化开发;同文件(模块)内部类似普通写法,可按业务模块划分Vuex模块,提高开发效率;还有一点儿,我觉得这样写省事儿,也好看-,-| 妈妈再也不用担心我所有的Vuex都放同一个文件中,要用时还得找半天了~~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • nuxt框架中对vuex进行模块化设置的实现方法

    1.Nuxt里怎么使用vuex? Nuxt.js 内置引用了 vuex 模块,所以不需要额外安装. Nuxt.js 会尝试找到应用根目录下的 store 目录,如果该目录存在,它将做以下的事情: 1.1> 引用 vuex 模块 1.2> 将 vuex 模块 加到 vendors 构建配置中去 1.3> 设置 Vue 根实例的 store 配置项 Nuxt.js 支持两种使用 store 的方式: 普通方式: store/index.js 返回一个 Vuex.Store 实例 模块方式:

  • Nuxt使用Vuex的方法示例

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 基础知识这里不再重述,学习的话请自行到官网学习https://vuex.vuejs.org/zh/ 文档最后有具体使用的实例,不想看基础的就直接下调页面~ 这里主要简单讲一讲Nuxt里怎么使用vuex, Nuxt.js 内置引用了vuex模块,所以不需要额外安装. Nuxt.js 会尝试找到应用根目录下的store目录,如果该目录存在,它将

  • nuxt踩坑之Vuex状态树的模块方式使用详解

    初次看到这个模块方式,感觉很是新奇,之前的vuex状态树使用方法用的也有些腻了,就想来实践一发新的东西 废话不多说,直接进入正题 Vuex状态树-模块方式官方文档解读 状态树还可以拆分成为模块,store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块 这句话啊,看了半天,我都没绕出来.之前一直用的是store目录下文件为:index.js.state.js.mutations.js.actions.js.后三个是index.js的子模块,你说这每个js文件都是一个模块?懵逼一分钟

  • web前端vue之vuex单独一文件使用方式实例详解

    Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 上次我用了一个加减的例子为大家讲解vuex的基本的使用方式,和在什么样的情况下使用.上次还是在一个组件内把这个例子简单的展示了下,这次我把vuex抽离出来一个

  • vuex state及mapState的基础用法详解

    先使用vue cli构建一个自己的vue项目 1.npm i -g vue-cli 2.vue init webpack sell (sell是你的项目名) 3.一路回车(在这个过程中会提示你是否安装一些依赖包,比如vue-router,es6语法检查等等,这些根据你个人习惯或者癖好选择Y/N) 4.npm i (这个是安装项目的依赖包) 5.npm run dev(启动你的vue项目) 这个时候如果在页面上看到了vue的logo说明你的vue的项目基础构建已经完成,然后你可以删除掉没有用的组件

  • Vuex中mutations与actions的区别详解

    区分 actions 和 mutations 并不是为了解决竞态问题,而是为了能用 devtools 追踪状态变化. 事实上在 vuex 里面 actions 只是一个架构性的概念,并不是必须的,说到底只是一个函数,你在里面想干嘛都可以,只要最后触发 mutation 就行.异步竞态怎么处理那是用户自己的事情. vuex 真正限制你的只有 mutation 必须是同步的这一点(在 redux 里面就好像 reducer 必须同步返回下一个状态一样).同步的意义在于这样每一个 mutation 执

  • C语言树状数组的实例详解

    C语言树状数组的实例详解 最近学了树状数组,给我的感觉就是 这个数据结构好神奇啊^_^ 首先她的常数比线段树小,其次她的实现复杂度也远低于线段树 (并没有黑线段树的意思=-=) 所以熟练掌握她是非常有必要的.. 关于树状数组的基础知识与原理网上一搜一大堆,我就不赘述了,就谈一些树状数组的应用好了 1,单点修改,求区间和 #define lowbit(x) (x&-x) // 设 x 的末尾零的个数为 y , 则 lowbit(x) == 2^y void Update(int i,int v)

  • vuex 中辅助函数mapGetters的基本用法详解

    mapGetters辅助函数 mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性: 1.在组件或界面中不使用mapGetter调用映射vuex中的getter 1.1 调用映射根部store中的getter <!-- test.vue --> <template> <div class="vuexReponse"> <div @click="changeVal">点击</di

  • Python Ast抽象语法树的介绍及应用详解

    目录 引言 1. AST简介 2. 创建AST 2.1 Compile函数 2.2 生成ast 3. 遍历AST 3.1 ast.NodeTransfer 3.2 ast.NodeTransformer 4.AST应用 4.1 汉字检测 4.2 Closure 检查 引言 Abstract Syntax Trees即抽象语法树.Ast是python源码到字节码的一种中间产物,借助ast模块可以从语法树的角度分析源码结构. 此外,我们不仅可以修改和执行语法树,还可以将Source生成的语法树unp

  • React状态管理Redux的使用介绍详解

    目录 1. 简介 2. 核心概念 3. redux工作流 4. 模拟redux工作流程 5. 使用redux 6. react-redux 1. 简介 Redux 是 JavaScript 应用的状态容器(对象),提供可预测的状态管理.可以让你开发出行为稳定可预测的应用,运行于不同的环境(客户端.服务器.原生应用),并且易于测试.Redux 除了和 React 一起用外,还支持其它界面库. 解决的问题:多层级组件间通信问题. 2. 核心概念 单一数据源 整个redux中的数据都是集中管理,存储于

  • Flutter状态管理Provider的使用示例详解

    目录 前言 计数器 全局状态 总结 前言 Provider是三大主流状态管理框架官方推荐使用的框架,它是基于官方数据共享组件InheritedWidget实现的,通过数据改变调用生命周期中的didChangeDependencies()方法,来实现状态的通知改变. InheritedWidget的使用可以参考我之前的这篇Flutter中几种数据传递的应用总结. 计数器 还是以计数器为例,这次通过Provider实现,provider相较于bloc并没有那么强制性分层,所以这里我们自己分为数据层(

  • JS技巧多状态页面中的mock方案详解

    目录 引言 技术选型 业务逻辑改造 Eruda 插件 Mock 数据整理 引言 我们有时候会遇到一个业务页面存在很多个状态,甚至子状态,比如订单详情就是其中的典型,涉及从订单创建到订单结束,以及售后等流程.维护起来每个状态对应一份数据,虽然我们 QA 提供了数据构造平台,但构造一份对应状态的数据还是需要花费不少时间,而且串行流程一旦出错的话只能重新来一遍. 后期维护阶段也不容易构造对应状态的数据,导致排查页面问题比较耗时. 另外一个问题就是从头熟悉业务的话成本比较高,如果有一个直观的页面能够看到

随机推荐