后台管理(4)--- vuex的实际使用(vue)

今天我们来讨论一下在项目中到底应该怎么使用vuex(vuex还没有入门的同学可以先看这个链接vuex 入门及持久化 - 简书)。那么什么时候我们需要用vuex呢,为什么要使用vuex呢?

大体思路

vuex大家可以简单了解成一个订阅发布模式的实现库,我们会发出action去修改state,并且state,只能用action去修改不能直接修改(这里的action可以理解成发请求修改)。并且如果页面用有用到vuex里面的state,state变化页面会自动重新渲染。那么我们根据这个原理,会发现,当我们有多个页面共用一个状态,或者多个模块公用一个状态的时候,那么我们就需要用vuex

1、创建vuex模块

vuex也是可以分模块的,哪怕我们可能用不到那么多的模块,最好也是分模块来写,毕竟我们不管做什么项目都要抱着一个做大项目的心态去

创建一个store目录在目录下创建一个用户信息模块(创建一个Account目录),然后创建mutations.js文件,同步发送改变state的请求,mutation-types命名空间(用不用都行),state.js当前模块的状态,然后在index统一导出,我们以登录后存放用户信息为例

目录

创建命名空间

mutation-types

创建一个mutation中编写一个存放用户信息的方法

mutation.js

编写state


在Account/index 导出该模块


Account/index

在store目录下创建index,引入vuex,并引入刚才的那几个模块,然后在入口文件(main)引入

store/index

在项目中使用

在页面中使用的时候不需要在引入任何文件,直接调用对应的方法即可。


login

使用

SideNavigationBar

总结

当vuex和vue的组件,可能进行过一些connect的操作,然后在操作vuex的时候,如果vuex的state在vuex的template中使用的话会重新渲染。下期我们讨论一下typeScript。vue有些哪些地方想讨论的欢迎加QQ: 1205669217讨论

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • vuex是一个状态管理模式,通过用户的actions触发事件,然后通过mutations去更改数据(你也可以说状态...
    Ming_Hu阅读 2,042评论 3 3
  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,972评论 0 7
  • 上一章总结了 Vuex 的框架原理,这一章我们将从 Vuex 的入口文件开始,分步骤阅读和解析源码。由于 Vuex...
    你的肖同学阅读 1,826评论 3 16
  • 配置 vuex 和 vuex 本地持久化 目录 vuex是什么 vuex 的五个核心概念State 定义状态(变量...
    稻草人_9ac7阅读 912评论 0 5
  • 结束是新的开始? 开始就知道会结束,那为什么要开始? 人生难道只是开始与结束的循环? 旋钮打开,就周而复始的运转下...
    楚地小生阅读 241评论 0 2