文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue如何使用Vuex封装并使用store

2023-07-04 23:28

关注

这篇文章主要介绍“Vue如何使用Vuex封装并使用store”,在日常操作中,相信很多人在Vue如何使用Vuex封装并使用store问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue如何使用Vuex封装并使用store”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

一、安装Vuex依赖

cnpm install vuex --save

二、一步步封装store

1. main.js中全局引入store仓库(下一步创建)

import store from './store' //引入store new Vue({  el: '#app',  router,  store, //挂载store,this将自动生成$store属性  template: '<App/>',  components: { App }})

挂载store,this将自动生成$store属性

2. this.$store

创建store仓库:习惯在src下创建store文件夹,再创建index.js,内容:

import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store(); export default store;

此时你已经有了一个空的store全局仓库,没有任何功能,但可以在任何vue实例下使用 this.$store 去访问它。

3. this.$store.state

给store仓库读取数据功能:state

import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex); const state={ //要设置的全局访问的state对象,赋予初始属性值     themeColor: {val:'blue',opacity:false},     changeThemeCount:0,     cache:''   };  const store = new Vuex.Store({       state    }); export default store;

此时你的store仓库已经有了存取数据的功能,可以用 this.$store.state.themeColor 等数据了。

下面是第二种写法

import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({      state:{        //要设置的全局访问的state对象,赋予初始属性值     themeColor: {val:'blue',opacity:false},     changeThemeCount:0,     cache:''       }    }); export default store;

4. this.$store.getters(this. $store.state的升级)

给state功能升级,让他拥有计算能力(类似vue中的computed方法):getters:

import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex); const state={ //要设置的全局访问的state对象,赋予初始属性值     themeColor: {val:'blue',opacity:false},     changeThemeCount:0,     cache:''   }; const getters = {   //实时监听state值的变化(最新状态)    getThemeColor(state) {  //定义函数,返回处理过的val,命名最好有代表性       let hour = new Date().getHours();       // 如果白天则主题色不透明,反之       state.themeColor.opacity = 8 <= hour && hour <= 20;       return state.themeColor    }};const store = new Vuex.Store({       state, // 挂载存取数据功能       getters //挂载数据计算功能});export default store;

此时使用 this.$store.getters.getThemeColor 获取颜色,将自动根据时间的不同自动设置主题是否有透明的效果

5. this.$store.commit(&lsquo;mutations&rsquo;)

给store仓库使用函数功能(只为操作state数据):mutations - 同步

import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex); const state={ //要设置的全局访问的state对象,赋予初始属性值     themeColor: {val:'blue',opacity:false},     changeThemeCount:0,     cache:''   }; const getters = {   //实时监听state值的变化(最新状态)    getThemeColor(state) {  //定义函数,返回处理过的val,命名最好有代表性       let hour = new Date().getHours();       // 如果白天则主题色不透明,反之       state.themeColor.opacity = 8 <= hour && hour <= 20;       return state.themeColor    }};const mutations = {    //自定义改变state初始值的方法,这里面的参数除了state之外还可以再传额外的参数(变量或对象);    clearCatch(state) {         state.cache = "";        state.changeThemeCount= 0;    },    setThemeColor(state,color,opacity){        state.themeColor.val = color;       state.themeColor.opacity = opacity;       state.changeThemeCount++;    }};const store = new Vuex.Store({        state, // 挂载存取数据功能       getters, //挂载数据计算功能       mutations // 挂载函数功能});export default store;

此时可以使用 this.$store.commit(&lsquo;setThemeColor&rsquo;,&lsquo;grey&rsquo;,&lsquo;1&rsquo;) 了(注意第一个参数是函数名,不是传参给state的,state自己会传,后两个才是对应传参)。

可以主动设置主题色和透明度,操作是同步的,即如果你在同一个组件连续调用多次setThemeColor函数,获取仓库中state.changeThemeCount的值是一样的,下面介绍异步函数。

6. this.$store.dispatch(&lsquo;actions&rsquo;)(this. $store.commit(&lsquo;mutations&rsquo;)的升级)

给store仓库的函数commit功能升级(只为异步操作mutations中的函数):actions - 异步

import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex); const state={ //要设置的全局访问的state对象,赋予初始属性值     themeColor: {val:'blue',opacity:false},     changeThemeCount:0,     cache:''   }; const getters = {   //实时监听state值的变化(最新状态)    getThemeColor(state) {  //定义函数,返回处理过的val,命名最好有代表性       let hour = new Date().getHours();       // 如果白天则主题色不透明,反之       state.themeColor.opacity = 8 <= hour && hour <= 20;       return state.themeColor    }};const mutations = {    //自定义改变state初始值的方法,这里面的参数除了state之外还可以再传额外的参数(变量或对象);    clearCatch(state) {         state.cache = "";        state.changeThemeCount= 0;    },    setThemeColor(state,color,opacity){        state.themeColor.val = color;       state.themeColor.opacity = opacity;       state.changeThemeCount++;    }};const actions = {    //自定义触发mutations里函数的方法,context与store 实例具有相同方法和属性    setThemeColorAction(context,color,opacity){     context.commit('setThemeColor',color,opacity);    }};const store = new Vuex.Store({       state, // 挂载存取数据功能       getters, //挂载数据计算功能       mutations, // 挂载函数功能       actions, // 挂载异步函数});export default store;

此时可以使用 this.$store.dispatch(&lsquo;setThemeColorAction&rsquo;,&lsquo;grey&rsquo;,&lsquo;1&rsquo;) 了(注意第一个参数是函数名,不是传参给context的,context自己会传,后两个才是对应传参)。

可以主动设置主题色和透明度,操作是异步的,即如果你在同一个组件连续调用多次setThemeColorAction函数,获取仓库中state.changeThemeCount的值就不是一样的。

7. strict严格模式

export default new Vuex.Store({  strict: true,  state: {    ...  },  ...}

此模式下所有的状态变更(即更新state)必须使用mutation(commit),如果在组件中直接修改state则会报错。这样的好处是所有的state的更新都体现在仓库中,整改方便;使用devTools调试工具时可以跟踪到状态的修改。

三、modules 模块化

第二个模块介绍了store仓库的四个功能:state、getters、mutations和actions,下面介绍第五个功能:modules。

在store下新建modules文件夹,在modules下新建home.js“子仓库”。

Vue如何使用Vuex封装并使用store

即home.js只管主页下的数据(一般不要分的太细,最多一个页面一个仓库管简洁),下面是home.js代码

//home.jsconst state={    users:[] //存访问该页面的所有用户};const getters={  getUsers(state){ //获取访问该页面的所有用户    // 对数据清理-除去脏数据  if (state.users.includes('*')) delete state.users['*']     return state.users;  }};const mutations={     addUser(state,name){ //增加访问用户        state.collects.push(name)     } };const actions={    invokeAddUser(context,name){ //触发mutations里面的addUser,传入数据形参name对应到users        context.commit('addUser',name);    }};// 注意和仓库的区别const store = {     // namespaced用于在全局引用此文件里的方法时标识这一个的文件名,使得让人明白这些数据来自哪个仓库     // 即当你需要在别的文件里面使用子仓库(mapStates、mapGetters、mapActions)时,里面的方法需要注明来自哪一个模块的方法     namespaced:true,     state,     getters,     mutations,     actions}export default store;

“子仓库”创建完成,要让主仓库引用它:

import Vue from 'vue';import Vuex from 'vuex';import home from './modules/home.js'Vue.use(Vuex); const state={ //要设置的全局访问的state对象,赋予初始属性值     themeColor: {val:'blue',opacity:false},     changeThemeCount:0,     cache:''   }; const getters = {   //实时监听state值的变化(最新状态)    getThemeColor(state) {  //定义函数,返回处理过的val,命名最好有代表性       let hour = new Date().getHours();       // 如果白天则主题色不透明,反之       state.themeColor.opacity = 8 <= hour && hour <= 20;       return state.themeColor    }};const mutations = {    //自定义改变state初始值的方法,这里面的参数除了state之外还可以再传额外的参数(变量或对象);    clearCatch(state) {         state.cache = "";        state.changeThemeCount= 0;    },    setThemeColor(state,color,opacity){        state.themeColor.val = color;       state.themeColor.opacity = opacity;       state.changeThemeCount++;    }};const actions = {    //自定义触发mutations里函数的方法,context与store 实例具有相同方法和属性    setThemeColorAction(context,color,opacity){     context.commit('setThemeColor',color,opacity);    }};const store = new Vuex.Store({       state, // 挂载存取数据功能       getters, //挂载数据计算功能       mutations, // 挂载函数功能       actions, // 挂载异步函数       modules:{ // 挂载子仓库         home    }});export default store;

此时便有了第一个“子仓库”了!

四、使用仓库

1. 无map系列

适合使用场景较少:

建好仓库,组件中直接使用state、getters、mutations、actions:

2. map映射系列

适合使用场景频繁:

使用mapGetters、mapActions 和 mapStates之前需要import导入:

import {mapState,mapGetters,mapActions} from 'vuex';

使用ES6新语法-超引用,将某个功能下的数据或方法全部映射出来以供使用,下面是mapState、mapGetters、mapActions的例子:

//这里的...是超引用,映射内容,可以写在computed下、methods下等(一般放在开头)// 直接从库中取值 - 将库里的users值返回给字典中的users并映射给this组件 ...mapState({           users:state=>state.home.users        }),     // 使用计算属性 - 将库里的users计算后的值返回给字典中的users并映射给this组件    ...mapGetters('home',{          users:'getUsers' //获取清理后的数据         //由于home仓库 namespaced:true,所以第一个参数作为标识         // 不使用标识访问的是主仓库      })      // 使用异步函数 - 以数组中的函数名,从库中对应的函数映射给this组件以供使用    ...mapActions('home',['invokeAddUser'])    // 有某个组件 <span @click='invokeAddUser(name)'></span>    // 或者直接使用 this.invokeAddUser(name)

3. 扩展

mapState映射的三种写法

  computed: mapState({   // 箭头函数可使代码更简练    count: state => state.count,    // 传字符串参数 'count' 等同于 `state => state.count`    countAlias: 'count',    // 为了能够使用 `this` 获取局部状态,必须使用常规函数    countPlusLocalState (state) {      return state.count + this.localCount    }  })  2、当映射的计算属性的名称与state的子节点名称相同时,   我们也可以给 mapState传一个字符串数组。  computed: mapState([ // 数组   "count"  ])  3、仓库中action的第二种接收参数const actions = {    //自定义触发mutations里函数的方法,{commit}与store 实例具有相同方法和属性    setThemeColorAction({commit},color,opacity){     commit('setThemeColor',color,opacity);    }};

到此,关于“Vue如何使用Vuex封装并使用store”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯