vuex进阶知识点巩固

一、 Getter

我们先回忆一下上一篇的代码

computed:{
  getName(){
   return this.$store.state.name
  }
}

这里假设现在逻辑有变,我们最终期望得到的数据(getName),是基于 this.$store.state.name 上经过复杂计算得来的,刚好这个getName要在好多个地方使用,那么我们就得复制好几份.

vuex 给我们提供了 getter,请看代码 (文件位置 /src/store/index.js)

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
 // 类似 vue 的 data
 state: {
  name: 'oldName'
 },
 // 类似 vue 的 computed -----------------以下5行为新增
 getters:{
  getReverseName: state => {
    return state.name.split('').reverse().join('')
  }
 },
 // 类似 vue 里的 mothods(同步方法)
 mutations: {
  updateName (state) {
   state.name = 'newName'
  }
 }
})

然后我们可以这样用 文件位置 /src/main.js

computed:{
  getName(){
   return this.$store.getters.getReverseName
  }
}

事实上, getter 不止单单起到封装的作用,它还跟vue的computed属性一样,会缓存结果数据, 只有当依赖改变的时候,才要重新计算.

二、 actions和$dispatch

细心的你,一定发现我之前代码里 mutations 头上的注释了 类似 vue 里的 mothods(同步方法)

为什么要在 methods 后面备注是同步方法呢? mutation只能是同步的函数,只能是同步的函数,只能是同步的函数!! 请看vuex的解释:

现在想象，我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录， devtools 都需要捕捉到前一状态和后一状态的快照。然而，在上面的例子中 mutation 中的异步函数中的回调让这不 可能完成：因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调 用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。
那么如果我们想触发一个异步的操作呢? 答案是: action + $dispatch, 我们继续修改store/index.js下面的代码

文件位置 /src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
 // 类似 vue 的 data
 state: {
  name: 'oldName'
 },
 // 类似 vue 的 computed
 getters:{
  getReverseName: state => {
    return state.name.split('').reverse().join('')
  }
 },
 // 类似 vue 里的 mothods(同步方法)
 mutations: {
  updateName (state) {
   state.name = 'newName'
  }
 },
 // 类似 vue 里的 mothods(异步方法) -------- 以下7行为新增
 actions: {
  updateNameAsync ({ commit }) {
   setTimeout(() => {
    commit('updateName')
   }, 1000)
  }
 }
})

然后我们可以再我们的vue页面里面这样使用

methods: {
  rename () {
    this.$store.dispatch('updateNameAsync')
  }
}

三、 Module 模块化

当项目越来越大的时候,单个 store 文件,肯定不是我们想要的, 所以就有了模块化. 假设 src/store 目录下有这2个文件

moduleA.js

export default {
  state: { ... },
  getters: { ... },
  mutations: { ... },
  actions: { ... }
}

moduleB.js

export default {
  state: { ... },
  getters: { ... },
  mutations: { ... },
  actions: { ... }
}

那么我们可以把 index.js 改成这样

import moduleA from './moduleA'
import moduleB from './moduleB'

export default new Vuex.Store({
  modules: {
    moduleA,
    moduleB
  }
})

这样我们就可以很轻松的把一个store拆分成多个.

四、 总结

  1. actions 的参数是 store 对象,而 getters 和 mutations 的参数是 state .
  2. actions 和 mutations 还可以传第二个参数,具体看vuex官方文档
  3. getters/mutations/actions 都有对应的map,如: mapGetters , 具体看vuex官方文档
  4. 模块内部如果怕有命名冲突的话,可以使用命名空间, 具体看vuex官方文档
  5. vuex 其实跟 vue 非常像,有data(state),methods(mutations,actions),computed(getters),还能模块化.
赞 (0)

相关推荐

  • 父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法

    场景: 我实际用到的是这样的,我父组件引用子组件related,父组件调用获取页面详情的方法,更新了state值related,子组件根据该related来渲染相关新闻内容,但是页面打开的时候总是先加载子组件,子组件在渲染的时候还没有获取到更新之后的related值,即使在子组件中watch该值的变化依然不能渲染出来子组件的相关新闻内容. 我的解决办法: 父组件像子组件传值,当父组件执行了获取页面详情的方法之后,state值related更新,然后传给子组件,子组件再进行渲染,可以正常获取到.

  • vuex操作state对象的实例代码

    Vuex是什么? VueX 是一个专门为 Vue.js 应用设计的状态管理架构,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data ). Vue有五个核心概念,state, getters, mutations, actions, modules. 总结 state => 基本数据 getters => 从基本数据派生的数据 mutations => 提交更改数据的方法,同步! actions => 像一个装饰器,包裹mutations,使之可以

  • vue router+vuex实现首页登录验证判断逻辑

    首页登录逻辑要求在页面上判断是否获取到登录token ,没有获取到则跳转到登录页.登录成功后,跳转到前一个页面. 1.vue router 路由判断首先我们想到的是router.beforeEach 前置导航守卫 ,这个方法接受三个参数 to from next . to参数为即将跳转的路由路径,from为当前导航正要离开的路由,next方法用来resolve这个钩子. 下面以工作中写的一个判断为为例子: router.beforeEach(async (to, from, next) => {

  • vuex与组件联合使用的方法

    官方定义: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.我的理解就是,vuex就是前端的数据库. 1.首先核心是store,是个仓库,包含着state,因此第一步需要新建一个store. 显示界面: 其中state就是仓库store,东西都存在这里. 2.从state中取数据,使用Lodash比较方便,语法如下: 也可以使用vuex的getters,语法; 官方文档还结束通过属性访问,通过方法访问等.https://vuex.vuejs.org/zh-cn/getters.h

  • 基于vue,vue-router, vuex及addRoutes进行权限控制问题

    基于vue,vue-router, vuex及addRoutes进行权限控制问题

    基于vuex, vue-router,vuex的权限控制教程,完整代码地址见 https://github.com/linrunzheng/vue-permission-control 接下来让我们模拟一个普通用户打开网站的过程,一步一步的走完整个流程. 首先从打开本地的服务localhost:8080开始,我们知道打开后会进入login页面,那么判断的依据是什么. 首先是token. 没有登陆的用户是获取不到token的,而登陆后的角色我们会将token存到local或者seesionStor

  • 简单的三步vuex入门

    前言 之前几个项目中,都多多少少碰到一些组件之间需要通信的地方,而因为种种原因, event bus 的成本反而比vuex还高, 所以技术选型上选用了 vuex, 但是不知道为什么, 团队里的一些新人一听到vuex,就开始退缩了, 因为vuex 很难? 真的很难吗? 今天我们用简单的3步来证明一下,vuex有多简单. 纯属个人经验,难免有不正确的地方,如有发现,欢迎指正! 这是一个针对新手的入门级教程.入门级教程.入门级教程 第零步 新建一个vue项目,安装vuex,这里不做过多介绍,能点进来的

  • 详解vuex结合localstorage动态监听storage的变化

    需求:不同组件间共用同一数据,当一个组件将数据发生变化时,其他组件也可以响应该变化. 分析:vue无法监听localstorage的变化.localstorage主要用于不同页面间传值,vue适合组件间传值.对于组件间共用同一数据又想保存住信息或者再页面刷新的时候不丢失数据(vuex在页面刷新的时候存储的值会丢失,localstorage存储在本地浏览器中),可以采用vuex+localstorage的方式. 关于vuex和storage的区别 1.最重要的区别:vuex存储在内存,locals

  • vuex进阶知识点巩固

    一. Getter 我们先回忆一下上一篇的代码 computed:{ getName(){ return this.$store.state.name } } 这里假设现在逻辑有变,我们最终期望得到的数据(getName),是基于 this.$store.state.name 上经过复杂计算得来的,刚好这个getName要在好多个地方使用,那么我们就得复制好几份. vuex 给我们提供了 getter,请看代码 (文件位置 /src/store/index.js) import Vue from

  • Vue.js进阶知识点总结

    对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站.但如果你想更加高效地使用Vue来开发,成为Vue.js大师,那下面我要传授的这五招你一定得认真学习一下了. 第一招:化繁为简的Watchers 场景还原: created(){ this.fetchPostList() }, watch: { searchInputValue(){ this.fetchPostList() } } 组件创建的时候我们获取一次列表,同时监听input框,每当发生变化的时候重新获取一次筛

  • JavaScript进阶知识点作用域详解

    JavaScript进阶知识点作用域详解

    目录 JavaScript进阶讲解一 一.浏览器的内核 1.常见的浏览器内核 二.JavaScript引擎 2.1.为什么需要JavaScript引擎? 2.2.常见的JavaScript引擎 三.V8引擎 3.1.官方定义 3.2.解析过程图示 四.JS的执行过程 4.1 普通代码执行 4.1 函数如何执行? 五.作用域提升理解undefined JavaScript进阶讲解一 接下来,我会给大家讲解js中让人让人迷惑的知识点,比如: 作用域.函数.闭包.面向对象.ES新特性.事件循环.微任务

  • Vuex 进阶之模块化组织详解

    Vuex 进阶之模块化组织详解

    上上篇:Vuex 入门 上一篇:Vuex 提升 自制vuex LOGO 前两篇讲解了一下 Vuex 的基本使用方法,可是在实际项目中那么写肯定是不合理的,如果组件太多,不可能把所有组件的数据都放到一个 store.js 中的,所以就需要模块化的组织 Vuex,首先看一下 项目结构. 项目结构 一.首先执行以下命令: vue init webpack-simple vuex-demo cd vuex-demo npm install npm install vuex -S npm run dev

  • Python语言进阶知识点总结

    Python语言进阶知识点总结

    数据结构和算法 算法:解决问题的方法和步骤 评价算法的好坏:渐近时间复杂度和渐近空间复杂度. 渐近时间复杂度的大O标记: - 常量时间复杂度 - 布隆过滤器 / 哈希存储 - 对数时间复杂度 - 折半查找(二分查找) - 线性时间复杂度 - 顺序查找 / 桶排序 - 对数线性时间复杂度 - 高级排序算法(归并排序.快速排序) - 平方时间复杂度 - 简单排序算法(选择排序.插入排序.冒泡排序) - 立方时间复杂度 - Floyd算法 / 矩阵乘法运算 - 几何级数时间复杂度 - 汉诺塔 - 阶乘

  • vuex入门最详细整理

    如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 . 我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 ( 父组件 ) 按钮交互的时候 , 它们之间的通讯很麻烦 : <!--父组件中引入子组件--> <template> <div> <a href="javas

  • python requests库的使用

    requests模块 使用requests可以模拟浏览器的请求,requests模块的本质是封装了urllib3模块的功能,比起之前用到的urllib,requests模块的api更加便捷 requests库发送请求将网页内容下载下来以后,并不会执行js代码,这需要我们自己分析目标站点然后发起新的request请求,但是selenium模块就可以执行js的操作. 安装: pip3 install requests 请求方式:主要用到的就get和post两种 #各种请求方式:常用的就是reques

  • Go语言面试题之select和channel的用法

    Go语言面试题之select和channel的用法

    目录 select 先说switch...case... 再说select...case.. select类比switch 经典示例 运行结果 channel 1.从已经关闭并且没有值的通道中取值 2.从已经关闭并且有值的通道中取值 一图胜千言 总结 select 先说switch...case... switch...case... 很常用,且很好理解.其作用和if...else...一样. 区别是switch...case 相比于if...else...能让我们的代码看起来更清晰,更好理解.

  • vuex vue简单使用知识点总结

    vue概念:vuex 是 Vue 配套的 公共数据管理工具,它可以把一些共享的数据,保存到 vuex 中,方便 整个程序中的任何组件直接获取或修改我们的公共数据: 配置vuex的步骤: 1.运行cnpm i vuex -S 2.导包 import Vuex from 'vuex' 3.将vuex注册到vue中 Vue.use(Vuex) 4.new Vuex.Store() 实例,得到一个 数据仓储对象 var store = new Vuex.Store({ state: { // 大家可以把

随机推荐