Vuex 状态管理实践城市选择页

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

状态管理模式

一个状态自管理应用包含以下几个部分:

state,驱动应用的数据源;

view,以声明方式将 state 映射到视图;

actions,响应在 view 上的用户输入导致的状态变化。

当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:

多个视图依赖于同一状态。

不同视图需要变更同一状态。

所以状态管理模式就是把共享的状态提取出来,在一个全局的地方进行统一管理。不管组件在哪,都能触发行为、获取状态,提高了代码维护性。

原理简单理解

Vuex 实现了一个单向数据流,全局管理 state 状态树,组件通过派发 Dispatch 一个 action,action 也是无法直接修改State的,还是需要通过 Mutation来修改State的数据。action 进行 commit 并调用 Mutations 方法来更改 state,Mutation同时提供了订阅者模式供组件调用获取State数据的更新。最后根据 state 的变化触发视图的更新。

Vue Components:Vue组件。

dispatch:是唯一能执行action的方法。

actions:由组件 dispatch 触发。然后由commit()来触发mutation的调用 , 更新 state。

commit:状态改变提交操作方法。对mutation进行提交,是唯一能执行mutation的方法。

mutations:状态改变操作方法,由actions中的commit('mutation 名称')来触发。该方法只能进行同步操作,且方法名只能全局唯一。

state:页面状态管理容器对象。

实践 - 城市选择

实现一个常见的城市选择页面。包含首页和城市选择页。

新建一个 IndexPage.vue

// IndexPage.vue

<template>
  <div>{{city}}</div>
</template>

<script>
  import { mapState} from 'vuex'

  export default {
    name: "IndexPage",
    computed: {
      ...mapState(['city'])
    }
  }
</script>

新建一个 CityPage.vue

// CityPage.vue

<template>
<div>
  <p>当前城市:{{city}}</p>
  <div v-for="item of ['北京','上海','广州']" :key="item">
    <button @click="handleChangeCity(item)"
    >{{item}}
    </button>
  </div>
</div>
</template>

<script>
  import { mapState ,mapMutations  } from 'vuex'

  export default {
    name: "CityPage",
    computed: {
      ...mapState(['city'])
    },
    methods: {
      ...mapMutations(['changeCity']),
      handleChangeCity (city) {
        this.changeCity(city)
      },
    },
  }
</script>

在 App.vue 中加入这两个页面。

//  App.vue

<template>
  <div>
    <IndexPage/>
    -----------
    <CityPage/>
  </div>
</template>

<script>
import IndexPage from './pages/IndexPage'
import CityPage from './pages/CityPage'

export default {
  name: 'App',
  components: {
    IndexPage,
    CityPage
  }
}
</script>

接下来重点来了,src 里 新建一个 store 文件夹 (如果使用脚手架搭建的就已经有这个文件夹了)。

store 文件夹下新建一个 index.js ,别忘了注入到 main.js。

//  index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  actions,
  mutations
})

新建一个 state.js

//  state.js

let defaultCity = '全国'

try {
  if (localStorage.city) {
    defaultCity = localStorage.city
  }
} catch (e) {
}

export default {
  city: defaultCity
}

新建一个 actions.js

// actions.js

export default {
  changeCity (context, city) {
    context.commit('changeCity', city)
  }
}

新建一个 mutations.js

// mutations.js

export default {
  changeCity (state, city) {
    state.city = city
    try {
      localStorage.city = city
    } catch (e) {
    }
  }
}

完成后如下图所示。选择新的城市,首页和城市选择页里的 city 会同步更新。

原文链接:juejin.im

上一篇:真·vue3.0全家桶+ts尝鲜、过坑。
下一篇:手写Promise,手把手过程

相关推荐

  • 高性能javascript--编程实践

    setTimeout()和settimeInterval()传递函数而不是字符串作为参数 引申: 用setTimeout()方法来模拟setInterval()与setInterval()之间的...

    6 个月前
  • 高德前端这五年:动态化技术的研发历程和全面落地实践

    前言 2015年2020年,历经5年发展,高德地图应用开发前端团队在业务快速发展中不断成长。一路走来,从小团队主要负责短期运营活动开发的散兵游勇,到现在团队规模100人,覆盖高德5大业务线,上百个模...

    21 天前
  • 高德APP启动耗时剖析与优化实践(iOS篇)

    前言最近高德地图APP完成了一次启动优化专项,超预期将双端启动的耗时都降低了65%以上,iOS在iPhone7上速度达到了400毫秒以内。就像产品们用后说的,快到不习惯。

    2 个月前
  • 高度灵活可定制的PC布局:头部按钮、左边栏、右边栏、状态栏

    什么是自适应布局 CabloyJS提供了一套布局管理器,实现自适应布局 关于自适应布局的概念,强烈建议先阅读以下两篇文章: 自适应布局:pc = mobile pad 自适应布局:视图尺寸 什么...

    1 个月前
  • 骚操作!在react中使用vuex

    原文地址(https://github.com/zyl1314/blog/issues/12) 前言 笔者最近在学习使用,提到react就绕不过去。redux是一个状态管理架构,被广泛用于rea...

    2 年前
  • 马蜂窝容器化平台前端赋能实践

    容器对前端开发真的有用吗?答案是肯定的。 最初当我向公司的前端同学「安利」容器技术的时候,很多人都会说:「容器?这不是用在后端的技术吗?我不懂啊,而且前端开发用不上吧。

    1 年前
  • 首页白屏优化实践

    前言 自从前端三大框架React、Vue、Angular面世以来,前端开发逐渐趋向规范化、统一化,大多数时候新建前端项目,首先想到使用的技术一定是三大框架之一,框架给前端开发带来了极大的便利和规范...

    9 个月前
  • 首发 | 闲鱼公开多年 Flutter 实践经验

    (https://img.javascriptcn.com/7f312df423086aca9f69ec144384ad5f) 阿里妹导读:Flutter从诞生到现在,已经成为了跨端开发的领跑者。

    8 个月前
  • 飞猪找一找,端侧 AI 的实践和展望

    本文介绍飞猪互动双十一彩蛋“飞猪找一找”, 一个基于 AI 图像识别的纯客户端游戏 (/public/upload/d1c681661c07508083ea69abbe26841c) 以这个游...

    1 个月前
  • 项目中资源缓存机制实践(静态资源和本地数据缓存)

    网络资源的缓存 核心方案 1. HTML文件 nocache 2. js,css文件 时间戳/哈希/版本号,长缓存 3. 图片资源 长缓存,更新时使用新链接地址 1. 前后端...

    9 个月前

官方社区

扫码加入 JavaScript 社区