对vuex在项目中的使用

2019年9月10日 197次阅读 来源: 六块腹肌的长者

前言

在之前开发的过程中，对于项目中的状态的一些保存，大部分都是
在window.localStorage、sessionStorage、或者cookie中保存。但是
两这之间有区别的：
    vuex存储在程序中的内存中，应用于组件之间的传值(响应式)，当刷新页面时vuex中
存储的值会丢失，vuex中将state当做全局存储。当刷新页面之后，会初始化state。
对于cookie 和 session 的区别：
        参考文档:https://www.cnblogs.com/pengc/p/8714475.html
vuex的原理 - 状态管理模式：state应用的数据源、view以声明的方式将state映射到视图上、
action响应在view上的用户的输入导致的变化。（参考官方文档：https://vuex.vuejs.org/zh）
vuex中当多个组件共享组件时，多个视图依赖同一个状态；来自不同视图的行为需要变更同
一个状态。因此把组件共享的状态提取出来，以一个全局单例模式管理。 
vuex的核心就是store(仓库),包含应用中大部分的状态，与全局对象的有两点不同:
    1、vuex的状态时响应式的。当vue组件从store中读取状态时，如果store中的
    状态发生变化，那么相应的组件也会更新。
    2、改变store中状态的唯一方法就是显式的提交(commit)mutation。这样我们可
    以方便跟踪每一个状态的变化。
基本概念：
    state:用一个对象包含所有的应用层级状态，也就是把所有需要用到的状态在这里先声明一下。
    在组件中展示state的状态。由于vuex的状态存储是响应式的，从store实例中读取状态量，
    最简单的方法是在"计算属性中"返回某个状态:

下面给出在vuex中模块化使用的方法：

《对vuex在项目中的使用》

在src目录结构下新建store状态文件，里面包含store.js(包含多个store模块，登录模块、网路请求模块)、
types.js(使用常量作为函数名，方便以后维护)。
下面看看store.js中对登录模块的封装：

    原文作者：六块腹肌的长者
    原文地址: https://segmentfault.com/a/1190000016053938
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞