Vue项目中如何运用vuex的实战记录

目录
  • Vuex 是什么？
  • vuex使用周期图
  • 我的store目录
  • 实现一个vuex的示例
  • 总结

Vuex 是什么？

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

当我们多个页面需要共享数据时就可以使用Vuex。比如：

  • 用户的个人信息管理模块；
  • 从订单结算页，进入选择优惠券的页面，选择优惠券的页面。如何保存选择的优惠券信息？state保存优惠券信息，选择优惠券时，mutations提交，在订单结算页，获取选择的优惠券，并更新订单优惠信息；
  • 购物车模块，每次都调用获取购物车数量的接口，效果是实现了,但是每一次的HTTP请求,都是对浏览器性能消耗。
  • 我的订单模块，订单列表也点击取消订单，然后更新对应的订单列表，这种情况也是用Vuex，state储存一个状态，监听这个状态，变化时更新对应的列表；

Vuex 背后的基本思想，借鉴了 Flux、Redux。与其他模式不同的是，Vuex 是专门为 Vue 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

vuex使用周期图

我的store目录

  • modules是存放不同的模块
  • action-types.js 是为了方便管理，字符串的映射，规范化的管理方式
  • mutation-types.js也是为了方便管理,试想一下，一大堆的功能模块混合在一起，那是多糟糕。
  • index.js

实现一个vuex的示例

让我们创建这几个文件

action-types.js

// 获取用户信息
export const QUERY_USER_INFO = "QUERY_USER_INFO"

mutation-types.js

// 设置用户信息
export const SET_USER_INFO = 'SET_USER_INFO'

在modules下面创建一个base.js文件

base.js

import { QUERY_USER_INFO } from '../action-types'
import { SET_USER_INFO, SET_CUR_MENU_ID } from '../mutation-types'
import api from '@/assets/js/api.js'

// 创建state
const state = {
    // 用户信息
    userInfo: {},
}

// 异步获取数据，commit给mutations，mutations改变state
const actions = {
    /* 获取用户信息 */
    [QUERY_USER_INFO] ({ commit }, params) {
        return api.get({
                url: '/system/getUser',
            }, params.vm).then(data => {
                commit(SET_USER_INFO, data)
                return data
        })

    }

}

const getters = {
    // 当前用户信息
    userInfo: state => state.userInfo
}

// 同步获取
const mutations = {
    [SET_USER_INFO] (state, data) {
        state.userInfo = data
    }
}

export default {
    state,
    actions,
    getters,
    mutations
}

index.js

mport Vue from "vue"
import Vuex from "vuex"
import base from "./modules/base.js"

Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
        base
    }
})

Header.vue

<span>{{$store.getters.userInfo.name}}</span>

main.js

import Vue from 'vue'
import store from './store'
import { QUERY_USER_INFO } from '@/store/action-types.js'

store.dispatch(QUERY_USER_INFO, {}).finally(() => {
    new Vue({
        router: router(store),
        store,
        render: h => h(App)
    }).$mount('#app')
})

总结

到此这篇关于Vue项目中如何运用vuex的文章就介绍到这了,更多相关Vue项目运用vuex内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 深入理解Vuex 模块化(module)

    一.为什么需要模块化 前面我们讲到的例子都在一个状态树里进行,当一个项目比较大时,所有的状态都集中在一起会得到一个比较大的对象,进而显得臃肿,难以维护.为了解决这个问题,Vuex允许我们将store分割成模块(module),每个module有自己的state,mutation,action,getter,甚至还可以往下嵌套模块,下面我们看一个典型的模块化例子 const moduleA = { state: {....}, mutations: {....}, actions: {....},

  • 全站最详细的Vuex教程

    什么是Vuex? vuex是一个专门为vue.js设计的集中式状态管理架构.状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态.简单的说就是data中需要共用的属性. 引入Vuex(前提是已经用Vue脚手架工具构建好项目) 1.利用npm包管理工具,进行安装 vuex.在控制命令行中输入下边的命令就可以了. npm install vuex --save 要注意的是这里一定要加上 –save,因为你这个包我们在生产环境中是要使用的. 2.新建一个store文件夹(

  • Vuex之理解Store的用法

    Vuex之理解Store的用法

    1.什么是Store? 上一篇文章说了,Vuex就是提供一个仓库,Store仓库里面放了很多对象.其中state就是数据源存放地,对应于与一般Vue对象里面的data(后面讲到的actions和mutations对应于methods). 在使用Vuex的时候通常会创建Store实例new Vuex.store({state,getters,mutations,actions})有很多子模块的时候还会使用到modules. 总结,Store类就是存储数据和管理数据方法的仓库,实现方式是将数据和方法

  • 详解vuex 中的 state 在组件中如何监听

    详解vuex 中的 state 在组件中如何监听

    前言 不知道大家有没有遇到过这样一种情况? vuex中的state会在某一个组建中使用,而这个状态的初始化是通过异步加载完成的.组件在渲染过程中,获取的state状态为空.也就是说组件在异步完成之前就已经完成渲染了,导致组件的数据没有来得及渲染. 问题举例 举例说明如下: // topo.vue created() { this.getUserAndSysIcons(); }, methods: { getUserAndSysIcons() { const self = this; // 用户图

  • 说说Vuex的getters属性的具体用法

    什么是getters 在介绍state中我们了解到,在Store仓库里,state就是用来存放数据,若是对数据进行处理输出,比如数据要过滤,一般我们可以写到computed中.但是如果很多组件都使用这个过滤后的数据,比如饼状图组件和曲线图组件,我们是否可以把这个数据抽提出来共享?这就是getters存在的意义.我们可以认为,[getters]是store的计算属性. 源码分析 wrapGetters初始化getters,接受3个参数,store表示当前的Store实例,moduleGetters

  • Vue.js实战之Vuex的入门教程

    Vue.js实战之Vuex的入门教程

    前言 在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式,详细点击这篇文章查看. 但是如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方便.Vue 的状态管理工具 Vuex 完美的解决了这个问题. 一.安装并引入 Vuex 项目结构: 首先使用 npm 安装 Vuex cnpm install vuex -S 然后在 main.js 中引入 import Vue from 'vue' import App

  • Vue项目中如何运用vuex的实战记录

    Vue项目中如何运用vuex的实战记录

    目录 Vuex 是什么? vuex使用周期图 我的store目录 实现一个vuex的示例 总结 Vuex 是什么? TIP

  • 一次VUE项目中遇到XSS攻击的实战记录

    一次VUE项目中遇到XSS攻击的实战记录

    目录 前言 发现原因 自定义过滤规则 总结 前言 随着互联网的高速发展,信息安全问题已经成为企业最为关注的焦点之一,而前端又是引发企业安全问题的高危据点.在移动互联网时代,前端人员除了传统的 XSS.CSRF 等安全问题之外,又时常遭遇网络劫持.非法调用 Hybrid API 等新型安全问题.当然,浏览器自身也在不断在进化和发展,不断引入 CSP.Same-Site Cookies 等新技术来增强安全性,但是仍存在很多潜在的威胁,这需要前端技术人员不断进行"查漏补缺". 发现原因 一切

  • Vue项目中封装组件的简单步骤记录

    Vue项目中封装组件的简单步骤记录

    目录 前言 如何封装一个Toast组件 使用案例 具体实现 总结 前言 随着业务的发展 功能性开发 已经无法满足我们对于前端的需求,这一篇主要带大家体验一下如何开发一套属于自己的组件库 使用场景:公司内部组件库的开发,个人组件库的开发,与项目解耦,多项目中使用同一组件,只需维护一套组件库 如何封装一个Toast组件 组件说明: 实现提示功能. 效果展示: 实现的功能: 根据某个判断条件或者点击某个按钮,弹出弹框: 可配置位置,类型,样式名等 使用案例 1. 简单使用 vm.$toast('网络异

  • 浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法

    1.在Vue项目中引用公共方法 作为一个新人小白,在使用vue的过程中,难免会遇到很多的问题,比如某个方法在很多组件中都能用的上,如果在每个组件上都去引用一次的话,会比较麻烦,增加代码量.怎么做比较好呢,话不多说直接看代码把 首先 要在main.js中引入公共js.然后,将方法赋在Vue的原型链上. 像图中这样. 然后在需要的组件上去引入这个方法 mouted (){ //调用方法 this.common.login(); } /**然后公共方法里写一段简单的代码*/ export defaul

  • vue项目中axios使用详解

    vue项目中axios使用详解

    axios在项目中(vue)的使用 没有vue项目的使用vue-cli脚手架生成一个webpack模板的项目即可愉快的看下去了~ 如果开发遇到跨域问题可以参考:http://www.jb51.net/article/134571.htm 安装axios到项目中 npm install axios --save 配置wepack别名,不同环境访问不同的配置接口 配置: 使用:import config from 'config' 封装一个axios实例 新建fetch.js,在此创建axios实例

  • vue项目中应用ueditor自定义上传按钮功能

    vue项目中应用ueditor自定义上传按钮功能

    由于上传地址问题,需要自定义上传按钮,效果如图 由于在页里面没有操作dom,所以想到了用vue的 自定义事件绑定$emit .$on来把点击事件传递给ueditor. 首先是给ueditor添加自定义按钮: 1,打开ueditor.all.js,找到btnCmds,大概在27854行,如下图,在数组添加一个自定义的按钮名称,我写的是"love" ueditor.all.js 2,给按钮添加事件 还是在ueditor.all.js文件内找到commands指令 给刚才定义的按钮扩展事件,

  • vue 项目中使用Loading组件的示例代码

    什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参数是Vue构造函数,还可以接收一个可选的参数,用于配置插件: var myplugin = { install:function(Vue, options){ ... } } 从意义上来说,正如jQuery的$.fn使jQuery有了一个庞大的生态一样,Vue的插件机制使Vue形成了一个生态系统,你

  • 详解Vue项目中实现锚点定位

    详解Vue项目中实现锚点定位

    背景 今天在开发限时练-提分加项目的时候,有一个需要锚点定位的需求,而在Vue项目中,使用传统的在a标签的href属性中写id的方法无效,会导致浏览器的地址改变从而跳转到其他页面. 解决 最终参考vue2.0中怎么做锚点定位改问题下的回答实现了效果. <template> <div class="score-preview-container"> <div class="content-box"> <div class=&q

  • 详解如何在Vue项目中导出Excel

    详解如何在Vue项目中导出Excel

    Excel 导出 Excel 的导入导出都是依赖于js-xlsx来实现的. 在 js-xlsx的基础上又封装了Export2Excel.js来方便导出数据. 使用 由于 Export2Excel不仅依赖js-xlsx还依赖file-saver和script-loader. 所以你先需要安装如下命令: npm install xlsx file-saver -S npm install script-loader -S -D 由于js-xlsx体积还是很大的,导出功能也不是一个非常常用的功能,所以

  • Vue项目中添加锁屏功能实现思路

    1. 实现思路 ( 1 ) 设置锁屏密码 ( 2 ) 密码存localStorage (本项目已经封装h5的sessionStorage和localStorage) ( 3 ) vuex设置 SET_LOCK state.isLock = true (为true是锁屏状态) ( 4 ) 在路由里面判断vuex里面的isLock(为true锁屏状态不能让用户后退url和自行修改url跳转页面否则可以) (1)设置锁屏密码 handleSetLock() { this.$refs['form'].v

随机推荐