美文网首页Vuevue玄机随录
后台管理(4)--- vuex的实际使用(vue)

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

作者: 填完一个又一个 | 来源:发表于2020-01-15 17:16 被阅读0次

今天我们来讨论一下在项目中到底应该怎么使用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讨论

相关文章

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

    今天我们来讨论一下在项目中到底应该怎么使用vuex(vuex还没有入门的同学可以先看这个链接vuex 入门及持久化...

  • vue常用的插件等安装

    Vuex:状态管理 vue-router:路由 axios:请求数据 mock:模拟后台数据 less和sass ...

  • 15-Vuex基础

    Vue之vuex状态管理 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 这个Vuex包含以下几...

  • vue安装veux

    现在使用npm i 会默认安装vuex4,vuex4只适用于vue3,如果使用的vue环境是vue3,安装vuex...

  • vuex1.0入门说明

    vuex 1.0 vue1的版本vuex 是对vue中的数据源状态进行管理的框架 vuex的图解 vuex就是一个...

  • 模板仓库

    1.1 github高分后台模板一 名称:vue2-manage 技术栈:vue2 +vuex + vue-rou...

  • Vuex 破门而入

    最近在学习vue。。。遇到vuex Vuex是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模...

  • Vuex的一些知识点

    vuex的一些知识点 vuex是vue的状态管理工具通过安装 vuex是一个专为vue.js应用程序开发的状态管理...

  • Vue 相关链接汇总

    官网 Vue 官网 Vuex 官网 (状态管理) Vue Router (路由管理) Vue Cli 相关 axi...

  • vuex源码分析(一)——初始化vuex

    本文参考珠峰架构公开课之vuex实现原理 vuex是基于vue框架的状态管理。 如何在vue项目中初始化vuex?...

网友评论

    本文标题:后台管理(4)--- vuex的实际使用(vue)

    本文链接:https://www.haomeiwen.com/subject/jgtoactx.html