资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/VueX状态管理器 的应用

VueX状态管理器 的应用

sydMobile / 1872人阅读

摘要：级别在中进行请求数据请求数据的接口相当于调用了在中定义的修改状态的方法就是在改变状态时要修改的数据，需要在这传递过去。

VueX状态管理器 
</>复制代码 
  1. cnpm i vuex axios -S
  2. 1 创建Vuex 仓库
  3. import Vue from "vue"
  4. import Vuex from "vuex"
  5. vue.use(Vuex)
  6. const store = new VueX.store({
  7.     state: {//存放状态}，
  8.     mutations:{//唯一修改状态的地方，不在这里做逻辑处理}
  9. })
  10. export default store
  11. 2 在入口文件main.js下引入store
  12. import store from "./store/index.js"
  13. 将store 放到根实例里  以供全局使用
  14. new Vue({
  15.     el:"#app",
  16.     store,
  17.     components:{App},
  18.     template:
  19. })
  20. 开始使用store(以home组件为例)

Vuex的使用也是一种渐进式的，你可以从最简单的开始使用，根据经验和技术的增加，再渐进增强对它的使用，如果按照级别算vuex的使用可以从最基本的t1级别开始，先总结最基本的前三个版本，后续有时间再总结其他的。

T1级别 
</>复制代码 
  1. 1.
  2. 在hoome/script.js中进行请求数据
  3. import Vue from "vue"
  4. import axios from "axios"
  5. export default {
  6.     mounted(){
  7.         axios.get("请求数据的接口")
  8.         .then((res)=>{this.$store.commit("changeList",res.data)})
  9.            //changeList相当于调用了在store.mutations中定义的修改状态的方法
  10.                     //res.data  就是在改变状态时要修改的数据，需要在这传递过去。
  11.         .catch((err)=>{console,log(err)})
  12.         }
  13.     }
  14. 2.
  15. 在store/index.js中定义
  16. import Vue from "vue"
  17. import Vuex from "vuex"
  18. vue.use(Vuex)
  19. const store = new VueX.store({
  20.     state: {
  21.         //存放状态
  22.         list: [ ]     //存放一个空的数组
  23. }，
  24.     mutations:{
  25.         //唯一修改状态的地方，不在这里做逻辑处理
  26.         //定义一个修改list的方法
  27.             //state 指上面存放list的对象，data 为在请求数据出传过来请求到的数据
  28.         changeList (state，data) {
  29.             state.list = data  //将请求来的数据赋值给list
  30.       }
  31.     }
  32.    })
  33. export default store
  34. 3.
  35. 在home/index.vue中渲染
  37. 注意点：
  38. （
  39. 如果我们在home组件中获取的数据，可以在其他组件中使用，但是是当页面刷新默认进入home页，也就是相当于修改了数据，再点击其他页面也能有数据。如果我们在user组件中获取的数据要在home组件中使用，当页面刷新数据是不会显示的，因为此时还没有触发user组件中的更改数据的方法，所以数据为空，当点击user页面时，就会有数据，这个时候再去点击home页面我们就能够看到在home 组件中使用user组件中获取的数据了。解决这种问题的办法可以将数据存到本地一份或者都在首页进行请求数据
  40. ）
T2级别 
</>复制代码 
  1. 在页面进行渲染的时候我们需要通过this.store.state去拿数据，这样的写法太长而且不太好
  2. 用计算属性结合mapState去解决这个问题
  3. 1
  4. 在home/script.js中进行操作
  5. import Vue from "vue"
  6. import mapState from "vuex"
  7. import axios from "axios"
  8. export default {
  9.     computed:{
  10.         //mapState为辅助函数
  11.         ...mapState(["list"])
  12.     },
  13.     mounted(){
  14.         axios.get("请求数据的接口")
  15.         .then((res)=>{this.$store.commit("changeList",res.data)})
  16.         .catch((err)=>{console,log(err)})
  17.         }
  18.     }
  19. 2
  20. 在home/index.vue中渲染
T3级别 
</>复制代码 
  2.   使用常量去代替事件类型(便于查看状态，利于维护)
  3.     1
  4.     在store下创建mutation-type.js
  5.     export const  CHANGE_LIST = "CHANGE_LIST"
  6.     
  7.     2
  8.     在store/index.js引入mutation-type.js
  9.     import Vue from "vue"
  10.     import Vuex from "vuex"
  11.     import {CHANGE_LIST }  from‘./mutation-type.js’
  12.     vue.use(Vuex)
  13.     const store = new VueX.store({
  14.         state: {
  15.             list: [ ]     //存放一个空的数组
  16.     }，
  17.         mutations:{
  18.         //我们可以使用Es6风格的计算属性命名功能来使用一个常量作为函数名
  19.             [CHANGE_LIST] (state，data) {
  20.                 state.list = data  //将请求来的数据赋值给list
  21.           }
  22.         }
  23.        })
  24.     export default store
  25.     
  26.     3
  27.     在home/script.js中进行引入
  28.     import Vue from "vue"
  29.     import mapState from "vuex"
  30.     import axios from "axios"
  31.     import {CHANGE_LIST} from ‘../../store/mutation-type.js’
  32.     export default {
  33.         computed:{
  34.             //mapState为辅助函数
  35.             ...mapState(["list"])
  36.         },
  37.         mounted(){
  38.             axios.get("请求数据的接口")
  39.             .then((res)=>{this.$store.commit(CHANGE_LIST,res.data)})
  40.             .catch((err)=>{console,log(err)})
  41.             }
  42.         }
云服务器 GPU云服务器 宝塔应用管理器 宝塔应用管理器使用 服务器管理器的使用 项目管理软件的应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96559.html

相关文章

  • VueX状态管理器 的应用

    摘要：级别在中进行请求数据请求数据的接口相当于调用了在中定义的修改状态的方法就是在改变状态时要修改的数据，需要在这传递过去。 VueX状态管理器 cnpm i vuex axios -S 1 创建Vuex 仓库 import Vue from vue import Vuex from vuex vue.use(Vuex) const store = new VueX.store({ ...

    shadowbook 评论0 收藏0

  • VueX状态管理器 的应用

    摘要：级别在中进行请求数据请求数据的接口相当于调用了在中定义的修改状态的方法就是在改变状态时要修改的数据，需要在这传递过去。 VueX状态管理器 cnpm i vuex axios -S 1 创建Vuex 仓库 import Vue from vue import Vuex from vuex vue.use(Vuex) const store = new VueX.store({ ...

    golden_hamster 评论0 收藏0

  • vuex 闲置状态重置方案

    摘要：为了做到页面的极致优化，我们需要将那些闲置的状态重置，以减小占用的内存空间。不如当路由改变时去重置中的所有状态。这里只是提供一种重置状态的一种方案，如果有更好方案还请各位看官留言。 前言 大型单页应用（后面都是指spa），我们往往会通过使用状态管理器 vuex 去解决组件间状态共享与状态传递等问题。这种应用少则几十个单页，多则上百个单页。随着路由的频繁切换，每个路由对应的 vuex 中...

    junfeng777 评论0 收藏0

  • 无痛学会各种 2 的 Vue2+Vuex2+Webpack2 前后端同构渲染

    摘要：它会检测出最大静态子树就是不需要动态性的子树并且从渲染函数中萃取出来。这样在每次重渲染的时候，它就会直接重用完全相同的同时跳过比对。需要注意的是，中的操作必须是同步的，不可以存在异步操作的情况。 新增：哈哈，最近又推出了 vue 的文章，在这里放个链接~手把手教你从零写一个简单的 VUE 感谢有人看我扯技术，这篇文章主要介绍最近非常火的vue2前端框架的特点和vue2+vuex2+we...

    fish 评论0 收藏0

  • 无痛学会各种 2 的 Vue2+Vuex2+Webpack2 前后端同构渲染

    摘要：它会检测出最大静态子树就是不需要动态性的子树并且从渲染函数中萃取出来。这样在每次重渲染的时候，它就会直接重用完全相同的同时跳过比对。需要注意的是，中的操作必须是同步的，不可以存在异步操作的情况。 新增：哈哈，最近又推出了 vue 的文章，在这里放个链接~手把手教你从零写一个简单的 VUE 感谢有人看我扯技术，这篇文章主要介绍最近非常火的vue2前端框架的特点和vue2+vuex2+we...

    30e8336b8229 评论0 收藏0

发表评论

登陆后可评论

0条评论

sydMobile

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<