首页 > 其他分享 >Vuex

Vuex

时间:2023-04-13 16:55:37浏览次数:47  
标签:... const actions state Vuex store

1. 概念

在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信

2. 何时使用?

多个组件需要共享数据时

3. 搭建vuex环境

创建文件:src/store/index.js

        // 引入vue
        import Vue from 'vue'
        // 引入Vuex
        import Vuex from 'vuex'
        // 使用Vuex插件
        Vue.use(Vuex)

        // 准备actions---用于响应组件中的动作
        const actions = {

        }

        // 准备mutations---用于操作数据(state)
        const mutations = {

        }

        // 准备state---用于存储数据
        const state = {

        }


        // 创建store and 导出
        export default new Vuex.Store({
            actions,
            mutations,
            state
        })

在main.js中创建vm时传入store配置时

    ....
    // 引入store 
    import store from './store'
    ....

    // 创建vm
    const vm = new Vue({
        render:h=>h(App),
        store,
        beforeCreate(){
        Vue.prototype.$bus = this  
        }
    })

4. 基本使用

4.1 初始化数据,配置actions,配置mutations,操作文件store.js

        // 引入vue
        import Vue from 'vue'
        // 引入Vuex
        import Vuex from 'vuex'
        // 使用Vuex插件
        Vue.use(Vuex)


        const actions = {
            // 响应组件中加的动作
            jia(context,value){
                // console.log('actions中的jia被调用了',context,value)
                context.commit('JIA',value)
            }
        }

        const mutations = {
            // 执行加
            JIA(state,value){
                // console.log('mutations中的JIA被调用了',state,value)
                state.sum += value
            }
        }

        // 初始化数据
        const state = {
            sum:0
        }

        // 创建并暴露store
        export default new Vue.Store({
            actions,
            mutations,
            state
        })

4.2 组件中读取vuex中的数据: $store.state.sum

4.3 组件中修改vuex中的数据: $store.dispatch('actions中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)

备注:若没有网络请求或其他业务逻辑,组件中也可越过actions,既不写dispatch,直接编写commit

5. getters的使用

5.1 概念:当state中的数据需要经过加工后再使用时,可以使用getters加工

5.2 再store.js中追加getters配置

        ....
        const getters = {
            bigSum(state){
                return state.sum * 10
            }
        }


        // 创建并暴露store
        expost default new Vuex.Store({
            ....
            getters
        })

5.3 组件中读取数据:
$store.getters.bigSum

6. 四个map方法的使用

6.1 mapState方法,用于帮助我们映射state中的数据为计算属性

       computed:{
           // 借组mapState生成计算属性: sum,school,subject(对象写法)
           ...mapState({sum:'sum',school:'school',subject:'subject'}),


           // 借助mapState生成计算属性,从state中读取数据(数组写法)
           ...mapState(['sum','school','subject']),

6.2 mapGetters方法:用于帮助我们映射getters中的数据为计算属性

        computed:{
            // 借助mapState生成计算属性,从state中读取数据.(对象写法)
             ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),

            // 借助mapState生成计算属性,从state中读取数据(数组写法)
            ...mapState(['sum','school','subject']),
        }

6.3 mapActions方法:用于帮助我们生成于actions对话的方法,即:包含$store.dispatch(xxx)的函数

        methods:{
            // 靠mapActions生成:inCrementOdd,inCrementWait(对象形式)
            ...mapActions({inCrementOdd:'jiaOdd',inCrementWait:'jiaWait'}),

            // 靠mapActions生成:inCrementOdd,inCrementWait(数组形式)
            ...mapActions(['jiaOdd','jiaWait']),
        }

6.4 mapMutations方法:用于帮助我们生成与mutations对话的方法,既:包含$store.commit(xxx)的函数

        methods:{
            // 靠mapMutations方法生成:inCrement,deCrement(对象形式)
            ...mapActions({inCrement:'JIA',deCrement:'JIAN'}),

            // 靠mapMutations方法生成:JIA,JIAN(数组形式)
            ...mapActions(['JIA','JIAN']),
        }

备注:mapActions与mapMutations使用时,若需要传递参数需要,在模板中绑定事件时传递好参数,否则参数是事件对象

7. 模块化+命名空间

7.1 目的:让代码更好维护,让多种数据分类更加明确

7.2 修改store.js

        const countAbout = {
            namespaced:true, //开启命名空间
            state:{x:1},
            mutations:{...},
            actions:{....},
            getters:{
                bigSum(state){
                    return state.sum * 10
                }
            }
        }

        const personAbout = {
            namespaced:true, //开启命名空间
            state:{...},
            mutations:{...},
            actions:{...}
        }

        const store = new Vuex.Store({
            modules:{
               countAbout, 
               personAbout
            }
        })

7.3 开启命名空间后,组件中读取state数据:

        //方式一:自己直接读取
        this.$store.state.personAbout.list
        //方式二:借助mapState读取
        ...mapState('personAbout',['list'])

张勇辉

标签:...,const,actions,state,Vuex,store
From: https://www.cnblogs.com/DTCLOUD/p/17315415.html

相关文章

  • Vuex笔记
    Vuex有state,mutation,actions,getter四种用法如下:1、state(存储数据):state{count:0//全局数据}获取state数据两种方式:this.$store.state.全局数据名称利用辅助函数mapstateImport{mapState}from“vuex”computed:{…mapstate([“全局数据名称”])}2、mutation(更......
  • Vuex module之间调用与读值
    对于模块内部的mutation和getter,接收的第一个参数是模块的局部状态对象state对于模块内部的action,局部状态通过context.state暴露出来,根节点状态则为context.rootState使用全局state和getter,rootState和rootGetters会作为第三和第四参数传入getter,也会通过conte......
  • vuex store
    一,vuex:状态管理(集中式存储应用的所有组件的状态)vuex是vue的插件store:商店二,vuex有那些属性staste:{}-------------用来放数据的,类似于组件中的datagetters:{}-------------就是一个计算属性[类似于组件中的computed]mutations:{}-----------就是一个存放方法的[类似......
  • vuex
    笔记脚手架文件结构├──node_modules├──public│├──favicon.ico:页签图标│└──index.html:主页面├──src│├──assets:存放静态......
  • Vue进阶(二十七):Vuex 之 getters, mapGetters, ...mapGetters详解
    一、前言Vuex提供了state状态统一管理树,开发者可以在vue中用computed计算属性接收这些公共状态以便使用。当然,也可以在接收原值的基础上对这个值做出一些改造,如:computed:{......
  • 【开发小记】vuex存储用户信息
    今天开发的过程中,遵循前人的经验对用户信息进行了存储。实现这个功能之后,我突然想到vuex本质是什么呢?它为什么要存在,以及它和浏览器的缓存的区别又是什么呢?(第三小节会给出......
  • vue-cli 初始化创建 vue2.9.6 项目路由守卫、封装axios、vuex
    阅读目录Vue如何封装Axios请求1安装axios2封装代码axios应用方式Vue中的路由守卫使用演示1全局守卫2组件级守卫3单个路由独享的守卫4官网整个路由守卫被触发流程的......
  • Vuex 和 localStorage 的区别
    Vuex和localStorage的区别最重要的区别:vuex存储在内存中localstorage则以文件的方式存储在本地,只能存储字符串类型的数据,存储对象需要JSON的stringify和parse方......
  • Vue.js Vuex实现求和案例
    视频Vuex版本componentsCount.vue<template> <div> <!--模板里能看见vc上所有东西--> <h1>当前求和为:{{$store.state.sum}}</h1> <selectv-model.number="n......
  • Vue.js 搭建Vuex环境
    视频npmivuex@33.搭建vuex环境创建文件:src/store/index.js//引入Vue核心库importVuefrom'vue'//引入VueximportVuexfrom'vuex'//应用Vuex插件Vue.u......