这篇文章给大家介绍的内容是关于vuex中状态管理器的应用，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
VueX状态管理器
cnpm i vuex axios -S1 创建Vuex 仓库import Vue from 'vue'import Vuex from 'vuex'vue.use(Vuex)const store = new VueX.store({ state: {//存放状态}， mutations:{//唯一修改状态的地方，不在这里做逻辑处理}})export default store2 在入口文件main.js下引入storeimport store from './store/index.js'将store 放到根实例里 以供全局使用new Vue({ el:'#app', store, components:{App}, template:})开始使用store(以home组件为例)
登录后复制
Vuex的使用也是一种渐进式的，你可以从最简单的开始使用，根据经验和技术的增加，再渐进增强对它的使用，如果按照级别算vuex的使用可以从最基本的t1级别开始，先总结最基本的前三个版本，后续有时间再总结其他的。
T1级别
1.在hoome/script.js中进行请求数据import Vue from 'vue'import axios from 'axios'export default { mounted(){ axios.get('请求数据的接口') .then((res)=>{this.$store.commit('changeList',res.data)}) //changeList相当于调用了在store.mutations中定义的修改状态的方法 //res.data 就是在改变状态时要修改的数据，需要在这传递过去。 .catch((err)=>{console,log(err)}) } }2.在store/index.js中定义import Vue from 'vue'import Vuex from 'vuex'vue.use(Vuex)const store = new VueX.store({ state: { //存放状态 list: [ ] //存放一个空的数组}， mutations:{ //唯一修改状态的地方，不在这里做逻辑处理 //定义一个修改list的方法 //state 指上面存放list的对象，data 为在请求数据出传过来请求到的数据 changeList (state，data) { state.list = data //将请求来的数据赋值给list } } })export default store3.在home/index.vue中渲染 //渲染数据的时候通过this.store.state.list直接从store中取数据 //还可以从其他组件通过这种方法去用这个数据无需重新获取 登录后复制
注意点：如果我们在home组件中获取的数据，可以在其他组件中使用，但是是当页面刷新默认进入home页，也就是相当于修改了数据，再点击其他页面也能有数据。如果我们在user组件中获取的数据要在home组件中使用，当页面刷新数据是不会显示的，因为此时还没有触发user组件中的更改数据的方法，所以数据为空，当点击user页面时，就会有数据，这个时候再去点击home页面我们就能够看到在home 组件中使用user组件中获取的数据了。解决这种问题的办法可以将数据存到本地一份或者都在首页进行请求数据
立即学习“前端免费学习笔记（深入）”；
T2级别
在页面进行渲染的时候我们需要通过this.store.state去拿数据，这样的写法太长而且不太好
用计算属性结合mapState去解决这个问题
1在home/script.js中进行操作import Vue from 'vue'import mapState from 'vuex'import axios from 'axios'export default { computed:{ //mapState为辅助函数 ...mapState(['list']) }, mounted(){ axios.get('请求数据的接口') .then((res)=>{this.$store.commit('changeList',res.data)}) .catch((err)=>{console,log(err)}) } }2在home/index.vue中渲染 登录后复制
T3级别
使用常量去代替事件类型(便于查看状态，利于维护)
1 在store下创建mutation-type.js export const CHANGE_LIST = 'CHANGE_LIST' 2 在store/index.js引入mutation-type.js import Vue from 'vue' import Vuex from 'vuex' import {CHANGE_LIST } from‘./mutation-type.js’ vue.use(Vuex) const store = new VueX.store({ state: { list: [ ] //存放一个空的数组 }， mutations:{ //我们可以使用Es6风格的计算属性命名功能来使用一个常量作为函数名 [CHANGE_LIST] (state，data) { state.list = data //将请求来的数据赋值给list } } }) export default store 3 在home/script.js中进行引入 import Vue from 'vue' import mapState from 'vuex' import axios from 'axios' import {CHANGE_LIST} from ‘../../store/mutation-type.js’ export default { computed:{ //mapState为辅助函数 ...mapState(['list']) }, mounted(){ axios.get('请求数据的接口') .then((res)=>{this.$store.commit(CHANGE_LIST,res.data)}) .catch((err)=>{console,log(err)}) } }
登录后复制
相关文章推荐：
vue中权限控制动态路由的创建流程（图文）
vue中权限控制动态路由的创建流程（图文）
以上就是VueX中状态管理器的应用的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2744558.html
