vuex基础总结

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

上面的例子只是一个简单的组件间通信的例子，在实际项目中，组件间的通信往往比这要复杂的很多，所以说当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏

而vuex就是将所有状态集中管理起来，更加方便的实现组件间的通信，以往要实现数据的传递需要一步一步的向上传递，有了vuex，所有组件都可以向vuex中存数据，也可以取数据

多个组件共享数据或者是跨组件传递数据时

然后在组件中就可以通过this$store访问到vuex了

state作为唯一的数据源，所有的共享数据都存放在state中，如：

vuex不允许在组件中修改state中的状态，如果想要修改state的数据，唯一的方法就是通过mutations修改，其实在组件中是可以直接修改的，但是这样通过mutations修改的方式，可以更加集中的监控所有数据的变化。

在mutations中定义一些修改state数据的方法，方法第一个参数就是state对象

（1）触发mutation的方法

这次是在组件的methods中，将mutation映射成methods的方法

（2）mutation传值（官网将传递的值称为载荷）

对于mutaion而言，方法接受的第一个参数始终是自身的state，第二个才是传递过来的参数，这个参数一般是一个对象，因为对象可以携带更多的数据。当然只有一条数据可以只传递这条数据

还可以写成一种对象的方式

mapMutations传值

（3）注意

actions和mutations类似，不同的是，actions是提交mutation修改共享数据，不是直接改变共享数据的，只有通过mutation才能修改state中的函数；actions中可以执行异步 *** 作。actions中的每一个方法的第一个参数默认使context，是与 store 实例具有相同方法和属性的对象（context !== store对象）。而在组件中执行actions方法的方式就是：this$storedispatch('方法名')

比如定义一个定时器异步的使count自增

而提交mutation的方法是commit，利用解构赋值将commit结构出来，提交mutation修改state的值

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤等，其实也可以理解为是类似vue的计算属性，函数接受一个参数state,也就是数据源，数据也是响应式的，state数据变化。getters里面的数据也会随之变化，不会修改state中的数据,第二个参数是getters，通过这个属性我们就可以访问到其他的getter了

组件中访问getters中的属性

其实和state差不多，就不多说了

下一节：vuex模块化

前端任务点，编写登录请求函数，和 用户注册 类似，前端拿到用户名和密码发起 POST 请求。

收到 token 如何持久化存储，如何让每次请求都携带 token 是这里的点。

用户登录的接口详情可以点 这里 。

这里有可以优化的点，未来可能需要添加验证码等附加信息，这个时候就需要添加函数参数，就会比较麻烦，可以将参数数据格式包装成一个对象。当然，这里还是使用第一种方法了。

这不是重点，重点是登录成功后，我们要做的事情。

按照接口约定，登录成功我们可以得到如下信息：

这里我们要用到 token 字段，是我们现在有 token 了，但一刷新就没了，所以我们要做一下持久化存储，你想存哪里就存哪里，只要你能找到。这里就存储 localStorage 中了，在 Chorme86 中你甚至可以存到一个本地的文本文件中，只不过读取速度比较慢罢了。

除了 token，我们还要将用户信息存下来，比如首页展示用的用户头像等信息。

关于本地信息的安全性问题，本地保存的用户信息并不作为数据请求的凭证，仅供展示使用，当用户更改本地的用户信息对于登录的状态不会有影响，因为后端的判断依据是 token，token 有效就登录成功，而不是说本地存储的用户信息是谁服务端就认为你是谁，前端是不可信的。这种登录方式的危险点在于用户 token 被盗，但这很难避免，最不安全的是人。。。

登录成功，返回首页，用户名或者是用户头像并没有同步更新，这是因为，这里是单页应用，你在 login 页面将登录用户信息存到 localStorage 中，然后跳转到了首页，此时页面没有刷新，而 localStorage 中的信息没有及时更新到 DOM 中，此时的用户信息还是你没有进入 login 页面的用户信息，自然是无法展示的，怎么解决呢？很简单，刷新一下。

当页面刷新时，用户信息会从 localStorage 中读取，显示的就是现在的登录用户了，但。。。

我不想刷新。

也很简单，搞成响应式数据就好了呀。来人呀，上Vuex。

当你将 token 存在 cookie 中，前端并不需要主动设置，默认就携带传给了服务端，而这里我们存到 Authorization 中，就需要我们设置一下，拦截请求，在请求发送前添加 token。

好的，来捋一捋流程。

用户访问 /login，被前端路由处理，指向Loginvue，用户看到登录框，填入自己的账号，当用户填写账号时，name password被实时监听，同时会对登录按钮的可 *** 作产生影响，只有当用户将账密输入完整时，登录按钮可用。

前端收集用户信息，调用 network 中封装的 longin 请求函数，该请求发送前被拦截，添加 token，可能为空，使用账密登录时，token没实际效用。

后端检查成功给响应，前端将响应中数据的 token 通过触发 mutations 更新 Vuex 中 state，同时，将该 token 存到 localStorage，以免用户关掉页面导致 token 丢失。

登录成功跳到应用首页，用户头像等信息通过 Vuex 获取，因为 Vuex 中的数据是响应式的，此时从 login 跳转到首页，用户头像等信息也会得到相应的更新。

当用户新增文章时，只需向服务器传文章数据就可以了，而对于文章作者的相关信息则由后端从请求头中的 token 解析得到，这里需要注意，前端不要将本地的用户信息作为准确的作者信息，对于用户可以伪造的信息要做最小化的信任，用户完全有能力将本地用户名从张三改为李四，而最终作者是那个则需要由用户提供的 token 来判定，虽说 token 也有可能被伪造，但难度相对较大，往往是被窃取的可能性更大。

无密码登录其实还是需要“密码”的，只不过是换了一个临时性的对人不可读的字符串来代替罢了，并且每次请求帮你填好了。

在不考虑安全性的情况下本质上其实就是你将密码存到了浏览器里，然后你每次访问网站时让浏览器帮你输入用户名和密码，这个过程你是无感知的，这样自己就不用像个憨憨一样每次刷新就要填一遍表单。

填表是一件非常无聊的事。

要学一波 TypeScript 了呀。

初用vuex，项目中需要记录一些状态，来判断页面是否为登录状态和页面是否可被编辑，此时用到了vuex中的store来存储一个状态。

这里记录了两个值一个是id一个是状态值checkStatus,然后把创建的store在mainjs里导入

至此，我们可以在所需要的vue文件中为其赋值

赋值后，就可以在需要用到这些id和状态的vue文件中取值

现在，skillId和checkStatus相当于两个全局变量，可以在需要的页面获取值和更改值。但有一个严重的问题就是，在我们刷新页面的时候，vuex数据是重新初始化，无法获取的，导致出现了空值。

但这不是自己想要的结果，所以百度了一圈（ >

vuex是一个专门为vue构建的状态管理工具，主要是解决多组建状态共享的问题。强调的是集中式管理（组件与组件之间的关系变成了组建跟仓库之间的关系）。

vuex的核心包括：state（存放状态）、mutations（同步的更改状态）、actions（发送异步请求拿到数据）、getters（根据之前的状态发布新的状态）、modules（模块划分）

state发布一条新的数据，在getters里面更具状态派发新的状态，actions发送异步请求获取数据，然后再mutations里面同步的更新数据

使用场景：购物车的数据共享，登入注册

vuex的原理：

vuex实现了一个单项数据流，在全局又有一个state存放数据，当组建要更改state中的数据时，必须通过Mutation进行，mutation同时提供了订阅者模式供外部插件调用获取state数据的更新。而当所有异步 *** 作（常见于调用后台接口异步获取更新数据）或批量的同步 *** 作需要走Action，但Action也是无法直接修改state的，还是需要通过mutation来修改state的数据。最后根据state的变化，渲染到视图上。

vuex的使用

1、src目录下面新建一个vuex的文件夹

2、vuex 文件夹里面新建一个storejs

3、安装vuex 

cnpm install vuex --save

4、在刚才创建的storejs引入vue  引入vuex 并且use vuex

import Vue from 'vue'

import Vuex from 'vuex'

Vueuse(Vuex)

5、定义数据

/1state在vuex中用于存储数据/

var state={

    count:1

}

6、定义方法 mutations里面放的是方法，方法主要用于改变state里面的数据

var mutations={

    incCount(){

++statecount;

    }

}

暴露

const store = new VuexStore({

    state,

    mutations,

getters

})

export default store;

组建里面的使用

1引入 store

import store from '/vuex/storejs';

2、注册

export default{

data(){

    return {             

      msg:'我是一个home组件',

value1: null,

    }

},

store,

methods:{

    incCount(){

this$storecommit('incCount');  /触发 state里面的数据/

    }

}

    }

3、获取state里面的数据

this$storestate数据

4、触发 mutations 改变 state里面的数据

this$storecommit('incCount');

getters，有点类似计算属性，改变state里面count数据的时候，会出发getters里面的方法，获取新值

var getters={

computedCount:(state)=>{

return statecount2

});

页面使用：this$storegetterscomputedCount

action

action类似于mutation，不同在于，

action 提交的事mutation，而不是直接改变状态（也就是state里面的值）。

action 可以包含任意异步 *** 作

var actions={

acctionsincCount:(context)=>{

contextcommit('incCount');

});

页面使用：this$storedispatch()

以上就是关于vuex基础总结全部的内容，包括:vuex基础总结、11 | 登录前端实现、vuex中store保存的数据，刷新页面会清空等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！