Vue2总结(vuex的使用)

第一次接触vue到项目上线,还是需要总结的

index.html --入口文件 因为这框架是单页面应用,挂在一个app,然后动态渲染路由模板。

1.在index.htmlx中引入了插件(全局使用) 如:cookie,则需要在index.html中定义一个setCookie,getCookie,其他页面才可以调用


Vue2总结(vuex的使用)_第1张图片

2.请求后台路径

vue2推荐使用axios 

Vue2总结(vuex的使用)_第2张图片

  由于axios不能同步请求,所以需要使用jQuery

    当有多个后台路径时,需要在api.js(自定义配置后台路径的文件)中定义多个路径,然后将其暴露出去(export default)

3. 全局方法(我这里使用的是vuex)

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。目录结构如下

Vue2总结(vuex的使用)_第3张图片

    store 定义全局变量

    action.js 定义全局异步方法

    mutations.js 定义全局同步方法  (加载框不能写在同步方法中(不显示))

    types.js 和 getters.js 由于项目没有使用,所以我就啰嗦了,

    同步方法实例如下:

    1> 在store.js中定义全局变量

Vue2总结(vuex的使用)_第4张图片

   2> mutations.js 中的全局方法

Vue2总结(vuex的使用)_第5张图片    

3> 在需要使用的单页面中引入vuex


4> 在computed中引入需要的全局的变量

Vue2总结(vuex的使用)_第6张图片

5> 在methods中引入需要使用的全局方法

Vue2总结(vuex的使用)_第7张图片

6> 调用全局方法并传参


将值赋给全局变量

this.$store.state.userinfo= 1;

取值是 this.userinfo (前提是引入了store.js中userinfo的变量)

异步方法

Vue2总结(vuex的使用)_第8张图片

Vue2总结(vuex的使用)_第9张图片

调用方法

Vue2总结(vuex的使用)_第10张图片

由于vue

你可能感兴趣的:(Vue2总结(vuex的使用))