理解Vuex，搭建Vuex环境，getters配置项、(mapState、mapGetters、mapActions、mapMutations)的使用、vuex模块化+命名空间、求和案例——Vuex

已于 2023-04-14 14:52:41 修改
阅读量1.7k 收藏 2
点赞数 1
分类专栏： Vue 文章标签： javascript vue.js 前端 Powered by 金山文档
于 2023-03-17 10:55:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_70320000/article/details/129590824
版权

  1. 理解 Vuex

1.1 Vuex是什么

概念：专门在 Vue中 实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间的通信方式，且适用于任意组件间通信。

多组件共享数据——全局事件总线实现：

所有组件都能读到x，所有组件也都能修改 x

多组件共享数据——vuex 实现

1.2 什么时候使用Vuex

  1. 多个组件依赖同一状态（数据）

  1. 来自不同组件的行为需要变更同一状态（数据）

1.3 求和案例（纯Vue）

注意，对于复选框中的v-model的值为字符串，解决方法是：

  1. 为复选框的每一个选项的value前加冒号，加了冒号之后，引号里面的被视为表达式，而不是字符串，这样比较麻烦

  1. 为 v-model添加修饰符number，使收到的数据转换为数值

第一种解决为value添加 ：

    <select v-model="n">
        <option :value="1">1</option>
        <option :value="2">2</option>
        <option :value="3">3</option>
    </select>

第二种解决：为v-model添加修饰符 number

    <select v-model.number="n">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>

案例使用纯Vue的代码：

App.vue

<template>
    <div>
        <MyCount/>
    </div>
</template>

<script>
    import MyCount from './components/MyCount'
    export default {
        name: 'App',
        components: {
            MyCount,
        },
    }
</script>

MyCount.vue

<template>
  <div>
    <h1>当前求和为：{{sum}}</h1>
    <select v-model.number="n">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>
    export default {
        name: 'MyCount',
        data() {
            return {
                sum: 0,  //当前的和
                n: 1, //用户选择的数字
            }
        },
        methods: {
            increment() {
                this.sum += this.n
            },
            decrement() {
                this.sum -= this.n
            },
            incrementOdd() {
                if(this.sum % 2) {
                    this.sum += this.n
                }
            },
            incrementWait() {
                setTimeout(()=> {
                    this.sum += this.n
                }, 500)
            }
        },
    }
</script>

<style>
   button {
    margin-left: 5px;
   }
</style>

1.4 Vuex工作原理

  1. state、actions、mutations都是对象数据类型

  1. state、actions、mutations 都需要经过 store领导

  1. dispatch、commit都是 store身上的

  1. 还可以直接通过 组件 到 mutations，不需要经过actions，此时直接调用 commit

vuex 核心概念和API:

  1. state

  1. vuex管理的状态对象

  1. 它应该是唯一的

  1. actions

  1. 值是一个对象，包含多个响应用户动作的回调函数

  1. 通过 commit( )来触发 mutations中函数的调用，间接更新state

  1. 如何触发actions 中的回调？

在组件中使用 $store.dispatch('对应actions函数名', 数据)触发

  1. 可包含异步代码（定时器、ajax等）

  1. 代码示例：

const actions = {
    zzz(context, value) {
        context.commit('YYY',value)   //YYY为对应mutations中的函数名
    }
}

//也可以写为，下面使用了对象解构赋值
const actions = {
    zzz({commit,state}, value) {
        commit('YYY',value)   //YYY为对应mutations中的函数名
    }
}

  1. mutations

  1. 值是一个对象，包含多个直接更新 state的方法

  1. 谁能调用 mutations中的方法？如何调用？

在actions中使用 ： context.commit('对应的mutations方法名')触发

  1. mutations中方法的特点：不能写异步代码，只能单纯的操作 state

  1. 示例代码：

const mutations = {
    YYY(state,value) {
        //更新state的某个属性
    }
}

  1. getters

  1. 值为一个对象，包含多个用于返回数据的函数

  1. 如何使用？ $store.getters.xxx

  1. 示例代码

const getters = {
    mmm(state) {
        return state.msg + '!'
    }
}

  1. modules

  1. 包含多个 module

  1. 一个module 是一个 store的配置对象

  1. 与一个组件（包含有共享数据）对应

2.搭建 Vuex环境

  1. 安装 Vuex： npm i vuex@3

注意：vue2中，要用 vuex的3版本；vue3中，要用 vuex的4版本

目前用的是 vue2,所以要安装 vuex3，所以使用npm i vuex@3指定版本

  1. 引入并使用 Vue.use(vuex)

  1. 创建文件: src/store/index.js （建立一个store，store管理着actions,mutations,state,并且所有的组件都能看到 store,在引入并使用 vuex插件后，就可以为vm传入一个store配置项）

有两个选择：

  1. 在src文件夹中创建一个文件夹 vuex,并在该文件夹下创建 store.js文件

  1. 在src文件夹中创建一个文件夹 store,并在该文件夹下创建 index.js文件(官网推荐)

src/sotre/index.js

若main.js按照下面这样写：注意会报错：vuex的使用 必须要放到 store实例创建前

// 引入Vue
import Vue from 'vue'
// 引入 App
import App from './App'
// 引入插件
import vueResource from 'vue-resource'
import Vuex from 'vuex'  //引入vuex
import store from './store/index'
// 关闭Vue的生产提示
Vue.config.productionTip = false
// 使用插件
Vue.use(vueResource)
Vue.use(Vuex)
new Vue({
    el: '#root',
    render: h => h(App),
    store,  //store: store的简写形式
    // 安装全局事件总线
    beforeCreate() {
        Vue.prototype.$bus = this
    }

})

注意：脚手架解析import时，先把所有的import语句按照代码编写顺序全部汇总到最上方，解析完成后再执行其他语句。

所以我们将vuex的使用 放到 src/store/index.js文件中，并放到 store实例创建之前，由于Vue.use(Vuex)放在index.js文件，所以也需要引入 Vue

src/store/index.js:

// 该文件用于创建Vuex中最为核心的 store
import Vue from 'vue'
// 引入 Vuex
import Vuex from 'vuex'
// 使用 vuex插件
Vue.use(Vuex)

// 准备 actions对象，用于响应组件中的动作
const actions = {}
// 准备 mutations对象,用于操作数据（state）
const mutations = {}
// 准备 state对象,用于存储数据
const state = {}

// 创建并暴露 store
export default new Vuex.Store({
    actions,  //actions: actions,的简写，属性名与属性值相同
    mutations,
    state
})

  1. 在vm中添加配置项 store（当vuex插件被引入并使用后，vm及vc身上可以使用配置项store）

main.js

// 引入Vue
import Vue from 'vue'
// 引入 App
import App from './App'
// 引入插件
import vueResource from 'vue-resource'

import store from './store/index'
// 关闭Vue的生产提示
Vue.config.productionTip = false
// 使用插件
Vue.use(vueResource)
new Vue({
    el: '#root',
    render: h => h(App),
    store,  //store: store的简写形式，传入 store配置项
    // 安装全局事件总线
    beforeCreate() {
        Vue.prototype.$bus = this
    }
})

3.求和案例（Vuex版）

3.1 vuex的基本使用

一个小技巧，mutations对象里的 函数/方法名用大写的字母表示 ，actions里的函数用小写的

1.初始化数据、配置actions、配置mutations，操作文件index.js

// 该文件用于创建Vuex中最为核心的 store
import Vue from 'vue'
// 引入 Vuex
import Vuex from 'vuex'
// 使用 vuex插件
Vue.use(Vuex)

// 准备 actions对象，用于响应组件中的动作
const actions = {
    //响应组件中加的动作
    jia(context,value){   //jia: function() {}的简写形式
        context.commit('JIA',value)
    }
}
// 准备 mutations对象,用于操作数据（state）
const mutations = {
    //执行加
    JIA(state,value){   //mutations对象里的 函数/方法名用大写的字母表示
        //console.log('mutations中的JIA',state,value)
        state.sum += value
    }
}
// 准备 state对象,用于存储数据
//初始化数据
const state = {
    sum: 0,  //当前的和
}

// 创建并暴露 store
export default new Vuex.Store({
    actions,  //actions: actions,的简写，属性名与属性值相同
    mutations,
    state
})

2. 组件中读取vuex中的数据： $store.state.sum 若在模板中写不用加this，但是在js 中写必须加this

3. 组件中修改vuex中的数据：

$store.dispatch('actions中的方法名'，数据) 或 $store.commit('mutations中的方法名'，数据)

备注：若没有网络请求或其他业务逻辑，组件也可以越过 actions，即不写dispatch，直接编写commit

3.2 求和案例（Vuex版）

MyCount.vue

<template>
  <div>
    <h1>当前求和为：{{$store.state.sum}}</h1>
    <select v-model.number="n">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>

    export default {
        name: 'MyCount',
        data() {
            return {              
                n: 1, //用户选择的数字
            }
        },
        methods: {
            increment() {
                // this.$store.dispatch('jia',this.n)
                this.$store.commit('JIA',this.n)  //不经过 actions
            },
            decrement() {
                // this.$store.dispatch('jian',this.n)
                this.$store.commit('JIAN',this.n) //不经过 actions
            },
            incrementOdd() {
                // if(this.$store.state.sum % 2) {
                //     this.$store.dispatch('jia',this.n)
                // }
                this.$store.dispatch('jiaOdd',this.n)
            },
            incrementWait() {
                // setTimeout(()=> {
                //     this.$store.dispatch('jia',this.n)
                // }, 500)
                this.$store.dispatch('jiaWait',this.n)
            }
        },
    }
</script>

<style>
   button {
    margin-left: 5px;
   }
</style>

src/store/index.js

// 该文件用于创建Vuex中最为核心的 store
import Vue from 'vue'
// 引入 Vuex
import Vuex from 'vuex'
// 使用 vuex插件
Vue.use(Vuex)

// 准备 actions对象，用于响应组件中的动作
const actions = {
    /* jia(context,value){   //jia: function() {}的简写形式
        // console.log('actions中的jia被调用了')
        // console.log(context,value);
        context.commit('JIA',value)
    },
    jian(context,value){
        context.commit('JIAN',value)
    }, */
    jiaOdd(context,value){
        console.log('actions中的jiaOdd被调用了',context)
        if(context.state.sum % 2) {
            context.commit('JIA',value)
        }
        // console.log('处理了一些事情--jiaOdd')
        // context.dispatch('demo1', value)
    },
    /* demo1(context,value){
        console.log('处理了一些事情--demo1');
        context.dispatch('demo2', value)
    },
    demo2(context,value){
        console.log('处理了一些事情--demo2');
        if(context.state.sum % 2) {
            context.commit('JIA',value)
        }
    }, */
    jiaWait(context,value){
        console.log('actions中的jiaWait被调用了')
        setTimeout(()=>{
            context.commit('JIA',value)
        },1000)
    }
}
// 准备 mutations对象,用于操作数据（state）
const mutations = {
    JIA(state,value){
        console.log('mutations中的JIA')
        state.sum += value
    },
    JIAN(store,value){
        console.log('mutations中的JIAN')
        store.sum -= value
    }
}
// 准备 state对象,用于存储数据
const state = {
    sum: 0,  //当前的和
}

// 创建并暴露 store
export default new Vuex.Store({
    actions,  //actions: actions,的简写，属性名与属性值相同
    mutations,
    state
})

4. getters配置项

  1. 概念：当state中的数据需要经过加工后再使用时，可以使用 getters加工。

  1. 在index.js 中追加 getters配置

src/store/index.js

.....
// 准备 getters对象,用于state中的数据进行加工
const getters = {
    bigSum(state){
        return state.sum * 10  //需要用返回值返回
    }
}

// 创建并暴露 store
export default new Vuex.Store({
    actions,  //actions: actions,的简写，属性名与属性值相同
    mutations,
    state,
    getters
})

  1. 组件中读取数据： $store.getters.bigSum

state与getters像 data与computed的关系

5.四个map方法的使用(mapState、mapGetters、mapActions、mapMutations)

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

//引入 
import {mapState,mapGetters} from 'vuex'
.....
    computed: {
        //借助mapState生成计算属性,从state中读取数据（对象写法）
         ...mapState({sum:'sum',school:'school',subject:'subject'}),
             
        //借助mapState生成计算属性,从state中读取数据（数组写法）
        ...mapState(['sum','school','subject']),
    },

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

//引入 
import {mapState,mapGetters} from 'vuex'
.....
    computed: {
        // 借助mapGetters 生成计算属性，从getters中读取数据（对象写法）
        ...mapGetters({bigSum: 'bigSum'})
        
        // 借助mapGetters 生成计算属性，从getters中读取数据（数组写法）
        ...mapGetters(['bigSum'])
    },

  1. mapActions方法：用于帮助我们生成与 actions 对话的方法，即包含 $store.dispatch(xxx)的函数

methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

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

//<button @click="increment(n)">+</button>   //注意要在对应的函数中传参
//引入
import {mapMutations} from 'vuex'
..... 
methods:{
    //靠mapMutations生成对应的方法，方法中会调用 commit去联系mutations（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),
}

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

MyCount.vue:

<template>
  <div>
    <h1>当前求和为：{{sum}}</h1>
    <!-- <h3>当前求和放大10倍为：{{$store.getters.bigSum}}</h3> -->
    <h3>当前求和放大10倍为：{{bigSum}}</h3>
    <h3>我在{{school}}，学习{{subject}}</h3>
    <select v-model.number="n">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <button @click="JIA(n)">+</button>
    <button @click="JIAN(n)">-</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
  </div>
</template>

<script>
    import {mapState,mapGetters, mapMutations,mapActions} from 'vuex'
    export default {
        name: 'MyCount',
        data() {
            return {              
                n: 1, //用户选择的数字
            }
        },
        computed: {
            //靠程序员亲自去写计算属性
            /* he() {
                return this.$store.state.sum
            },*/
            
            //借助 mapState 生成计算属性，从state中读取数据（对象写法）    
            // ...mapState({he:'sum',xuexiao:'school',xueke:'subject'})

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

            // 借助mapGetters 生成计算属性，从getters中读取数据（对象写法）
            // ...mapGetters({bigSum: 'bigSum'})

            // 借助mapGetters 生成计算属性，从getters中读取数据（数组写法）
            ...mapGetters(['bigSum'])
        },
        methods: {
            // 程序员亲自写方法
            /* increment() {
                this.$store.commit('JIA',this.n)  //不经过 actions
            },
            decrement() {
                this.$store.commit('JIAN',this.n) //不经过 actions
            }, */
            //靠mapMutations生成对应的方法，方法中会调用 commit去联系mutations（对象形式）
            // ...mapMutations({increment:'JIA',decrement:'JIAN'}),

            //靠mapMutations生成对应的方法，方法中会调用 commit去联系mutations（数组形式）
            ...mapMutations(['JIA','JIAN']),
            /* *********************************** */
            /* incrementOdd() {
                this.$store.dispatch('jiaOdd',this.n)
            },
            incrementWait() {
                this.$store.dispatch('jiaWait',this.n)
            }, */

            // 靠mapActions生成对应的方法,方法中会调用 dispatch 去联系 actions(对象形式)
            // ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),

            // 靠mapActions生成对应的方法,方法中会调用 dispatch 去联系 actions(数组形式)
            ...mapActions(['jiaOdd','jiaWait'])
        },
        mounted() {
            console.log(this.$store)
            
        },
    }
</script>

<style>
   button {
    margin-left: 5px;
   }
</style>

6.vuex模块化 + (命名空间)namespace

  1. 目的：让代码更好维护，让多种数据分类更加明确。

  1. 修改 store.js, 为了解决不同模块命名冲突的问题且使数据进行分类从而更加明确，将不同模块的namespaced: true(默认为false)，之后在各个组件中引入getter、actions、mutations,state时，需要加上所属的模块名

// 该文件用于创建Vuex中最为核心的 store
import Vue from 'vue'
// 引入 Vuex
import Vuex from 'vuex'
// 使用 vuex插件
Vue.use(Vuex)

// 求和功能相关的配置
const countAbout = {
    namespaced: true,   //开启命名空间
    actions: {...},
    mutations:{...},
    state: {...},
    getters: {
        bigSum(state){
            return state.sum * 10
        }
    }
} 

// 人员管理相关的配置
const personAbout = {
    namespaced: true,  //开启命名空间
    actions: {...},
    mutations: {...},
    state:{...},
    getters: {...},
} 

// 创建并暴露 store
export default new Vuex.Store({
    modules: {
        countAbout  //countAbout:countAbout 的简写形式
        personAbout
    }
})

  1. 开启命名空间后，组件中读取state数据：

//方式一，自己直接读取
this.$store.state.countAbout.sum
//方式二，借助mapState读取
...mapState('countAbout',['sum','school','subject'])

  1. 开启命名空间后，组件中读取getters数据：

//方式一，自己直接读取
this.$store.getters['countAbout/sum']  //因为属性为带斜杠，所以不能使用点语法获取属性值
                                   //故使用中括号 + 引号获取属性值
//方式二，借助mapGetters读取
...mapGetters('countAbout',['bigSum'])

  1. 开启命名空间后，组件中调用 dispatch:

//方式一，自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person) 
//方式二，借助mapActions
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

  1. 开启命名空间后，组件中调用 commit

//方式一，自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person) 
//方式二，借助mapMutations
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'})

注意：还可将不同的数据模块放到单独的文件中，如 src/store/count.js，src/store/person.js

在文件中对其暴露，然后再在index.js文件中引入

如src/store/count.js

// 求和功能相关的配置
export default {
    namespaced: true,
    actions: {
        jiaOdd(context,value){
            console.log('actions中的jiaOdd被调用了',context)
            if(context.state.sum % 2) {
                context.commit('JIA',value)
            }
    
        },

        jiaWait(context,value){
            console.log('actions中的jiaWait被调用了')
            setTimeout(()=>{
                context.commit('JIA',value)
            },1000)
        }   
    },
    mutations: {
        JIA(state,value){
            console.log('mutations中的JIA')
            state.sum += value
        },
        JIAN(state,value){
            console.log('mutations中的JIAN')
            state.sum -= value
        },
    },
    state: {
        sum: 0,  //当前的和
        school: '尚硅谷',
        subject: '前端',
    },
    getters: {
        bigSum(state){
            return state.sum * 10
        }
    }
}

src/store/person.js

// 人员管理相关的配置
import axios from 'axios'
import { nanoid } from 'nanoid'
export default {
    namespaced: true,
    actions: {
        addPersonWang(context,value) {
            if(value.name.indexOf('王') === 0) {
                context.commit('ADD_PERSON',value)
            }else {
                alert('添加的人必须姓王')
            }
        },
        addPersonServer(context){
            axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
                response => {
                    console.log('请求成功了');
                    context.commit('ADD_PERSON',{id:nanoid(),name:response.data})
                },
                error => {
                    console.log('请求出错了',error.message);
                }
            )
        }
    },
    mutations: {
        ADD_PERSON(state,personObj) {
            state.personList.unshift(personObj)
        }
    },
    state: {
        personList: [
            {id:'001', name:'hhh'}
        ]
    },
    getters: {
        firstPersonName(state){
            return state.personList[0].name
        }
    }
}

src/store/index.js

// 该文件用于创建Vuex中最为核心的 store
import Vue from 'vue'
// 引入 Vuex
import Vuex from 'vuex'
// 使用 vuex插件
Vue.use(Vuex)

import countOptions from './count'
import personOptions from './person'
// 创建并暴露 store
export default new Vuex.Store({
    modules: {
        countAbout:countOptions,
        personAbout:personOptions
    }
})

MyCount.vue

<template>
  <div>
    <h1>当前求和为：{{sum}}</h1>
    <!-- <h3>当前求和放大10倍为：{{$store.getters.bigSum}}</h3> -->
    <h3>当前求和放大10倍为：{{bigSum}}</h3>
    <h3>我在{{school}}，学习{{subject}}</h3>
    <h3 style="color:red;">MyPerson组件的总人数是：{{personList.length}}</h3>
    <select v-model.number="n">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
  </div>
</template>

<script>
    import {mapState,mapGetters, mapMutations,mapActions} from 'vuex'
    export default {
        name: 'MyCount',
        data() {
            return {              
                n: 1, //用户选择的数字
            }
        },
        computed: {
            // 借助 mapState 生成计算属性，从state中读取数据（数组写法）
            ...mapState('countAbout',['sum', 'school','subject']),
            ...mapState('personAbout',['personList']),

            // 借助mapGetters 生成计算属性，从getters中读取数据（数组写法）
            ...mapGetters('countAbout',['bigSum'])
        },
        methods: {
            //靠mapMutations生成对应的方法，方法中会调用 commit去联系mutations（数组形式）
            ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
            // 靠mapActions生成对应的方法,方法中会调用 dispatch 去联系 actions(数组形式)
            ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
        },
        mounted() {
            console.log(this.$store)
            
        },
    }
</script>

<style>
   button {
    margin-left: 5px;
   }
</style>

MyPerson.vue

<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color:red;">MyCount组件求和为：{{sum}}</h3>
    <h3>列表中第一个人的名字是：{{firstPersonName}}</h3>
    <input type="text" placeholder="请输入名字" v-model="name">
    <button @click="add">添加</button>
    <button @click="addWang">添加一个姓王的人</button>
    <button @click="addPersonServer">添加一个人，名字随机</button>
    <ul>
        <li v-for="p in personList" :key="p.id">{{p.name}}</li>
        
    </ul>
  </div>
</template>

<script>
    import {nanoid} from 'nanoid'
    // import {mapState} from 'vuex'
    export default {
        name: 'MyPerson',
        data(){
            return {
                name: ''
            }
        },
        computed: {
            personList(){
                return this.$store.state.personAbout.personList
            },
            sum(){
                return this.$store.state.countAbout.sum
            },
            // ...mapState(['personList','sum'])
            firstPersonName(){
                return this.$store.getters['personAbout/firstPersonName']  //因为属性为带斜杠，所以不能使用点语法获取属性值
            }
        },
        methods: {
            add() {
                const personObj = {id:nanoid(),name:this.name}
                // console.log(personObj)
                this.$store.commit('personAbout/ADD_PERSON',personObj)
                this.name = ''
            },
            addWang() {
                const personObj = {id:nanoid(),name: this.name}
                this.$store.dispatch('personAbout/addPersonWang',personObj)
                this.name = ''
            },
            addPersonServer() {
                this.$store.dispatch('personAbout/addPersonServer')
            }            
        },
    }
</script>

嘻嘻哈哈二郎神
关注
专栏目录
vuex：store，mapState，getters，mapGetters，mutation及常量，mapMutations，actions，mapActions，module、命名空间
maopolunzi的博客
05-29 666
什么是状态管理 复杂的状态管理 Vuex的状态管理 Vuex的状态管理 Vuex的安装 创建Store 组件中使用store Vue devtool 手动安装devtool 单一状态树 组件获取状态 在setup中使用mapState getters的基本使用 getters第二个参数 getters的返回函数 mapGetters的辅助函数 Mutation基本使用 Mutation携带数据 Mutation常量类型 mapMut
mapState，模块化，命名空间
m0_45260754的博客
05-17 2221
mapState是一个语法糖，原来写法为 shuju(){ return this.$store.state.shuju; } mapState不用写的那么麻烦，computed:mapState({shuju：‘shuju’}） 如果有自己的计算属性的话，要用扩展运算符，注意此时computed后面有大括号{} 则computed：{ zishen(){ return this.s+1 } ...mapState(['shuju']) } 基本形式： 借助mapState生产
Vuex 中的 mapState 和 mapGetters
最新发布
承蒙关照！
08-14 404
使用 mapState和 mapGetters可以显著简化在 Vue 组件中使用 Vuex Store 的过程。本文介绍了它们的用法以及在模块化时的特殊注意事项。掌握这些辅助函数，将能更高效地管理和使用应用中的状态。希望这篇文章能对你在 Vue 开发中有所帮助！
Vuex使用mapState
王正魁
11-23 448
Vuex使用mapState。
vuex模块化，以及如何借助mapActions,mapMutations生成对应的方法
ONLYSRY的博客
07-05 1136
vuex的index.js【模块化写法】 把该放的东西放到固定位置：并加上命名空间：【namespaced: true】其次我们引入了 两个管理配置名：countAbout与personAbout就意味着不能再直接找store下的三个核心配置项 Actions，Mutations，State。必须加入一层关系，vue执行时就会疑惑，你到底要找countAbout下的配置项还是personAbout下的，所以前边的写法也得改。 Count.vue组件： 这里需要关注的重点为： 1.前边
mapGetters开启命名空间
凌霄的博客
11-14 1816
https://www.cnblogs.com/sea-breeze/p/11321961.html
Vue | vuex【理解 vuex + vuex开发者工具的使用 + vuex的基本使用和API + 四个map方法的使用+多组件共享数据 +模块化+命名空间 】
不爱吃菜的菜菜的博客
07-23 691
概念专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。Github地址https。.........
Vuex 模块化详解
wuxian_wj的博客
12-20 7133
本篇主要讲vuex的模块化，虽然官网已经讲得比较细致了，但是在实践的时候还是踩了不少坑。今天就在这里把模块化使用过程中的细节都讲清楚，方便大家学习，也方便自己以后复习。 1.Vuex简单介绍 1.1 Vuex是什么 官方：Vuex是一个专为Vue.js应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化（即通过提交mutation来更新状态） Vuex是适用于Vue项目开发时使用的状态管理工具。把组件中的共享状态抽取出来，以一个全局单例模式管理
Vuex的配置和使用（详细版）
weixin_45734902的博客
02-05 2627
Vuex 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) //准备acti
Vuex的使用方法
计算机小白学前端~
05-30 1205
目录 一、概念 二、何时使用 三、搭建vuex环境 四、基本使用 五.getters的使用 六、四个map方法的使用 七、模块化+命名空间 一、概念 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。 二、何时使用 多个组件需要共享数据时 三、搭建vuex环境 1.创建文件：src/store/index.js(在src里面新建一个store文件夹，然后再里
vuex仓库的五大属性、辅助函数与使用方法，史上最详细！
共同学习，共同成长
06-05 2016
Vuex是Vue.js的状态管理库，它通过中心化的状态管理使得组件间的数据共享更加容易。Vuex包含五个核心属性:state、getters、mutations、actions和modules。今天我们将详细讲解这五大属性的使用方法与辅助函数，并结合具体代码让小伙伴们深入理解 ，彻底掌握！
Vuex modules模式下mapState/mapMutations的操作实例
12-13
当我们使用 Vuex 实现全局状态维护时，可能需要将状态值划分多个模块，比如一些 root 级的用户登录状态，token，用户级的用户信息，购物车级的购物车信息。 下面我们实例演示下如何在多模块下使用 mapState/mapMutations。 modules 只作用于属性，属性会归属在相应的模块名的命名空间下。 mutations, actions, getter 没有命名空间的限定，所以要保证全局的唯一性，否则后者会覆盖前者 store/index.js import Vue from 'vue' import Vuex from 'vuex' import user fro
vuex中的 mapState， mapMutations
lazy_tomato的博客
04-12 410
本文介绍的vuex基于 @vuex3.0。
详细分析Vuex中的mapGetters
码农研究僧的博客
04-04 5321
用 mapGetters 和 mapState，可以简化组件中对于 Vuex 中状态和 getter 的映射工作，减少了重复的代码书写
Vuex—— state,mapState,...mapState对象展开符详解
我是谁的博客
05-30 1998
1.state state是什么? 定义:state(vuex) ≈ data (vue) vuex的state和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂载 数据和dom的双向绑定事件,也就是当你改变值的时候可以触发dom的更新. 虽然state和data有很多相似之处,但state在使用的时候一般被挂载到子组件的computed计算属性上,这样有利于st...
vuex的用法详解，含模块化及辅助函数（mapState, mapMutations, mapActions, mapGetters）
绿葡萄的博客
04-04 383
【代码】vuex的用法详解，含模块化及辅助函数（mapState, mapMutations, mapActions, mapGetters）
vuex的mapState，mapGetters，mapActions，mapMutations与模块化
m0_58656423的博客
05-19 2472
vuex的mapState，mapGetters，mapActions，mapMutations与模块化
Vuex进阶使用之modules模块化划分、mapState、mapActions辅助函数的使用
zyq_1020的博客
12-10 2560
一、vuex模块化modules 1、项目根目录新建一个sotre文件夹，在store文件夹内，新建两个文件（一个文件，一个文件夹），一个index.js文件，一个modules文件夹。 store index.js --文件 modules --文件夹 2、store->index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //把modules文件底下的模块遍历进来 const modulesFil
Vuex modules 模式下 mapState/mapMutations 的操作实例
lx6091543wwwcctv的博客
08-21 764
vuex modules下辅助函数怎么取值。
vuex里面的辅助函数mapState,mapGetters,mapMutations和mapActions用法
07-10
在Vuex中，我们可以使用辅助函数来简化状态管理的操作。下面是对这些辅助函数的用法的简要说明： 1. `mapState`：用于将 store 中的状态映射到组件的计算属性中。它接受一个数组或对象作为参数，数组中的元素可以是字符串或对象。如果是字符串，则表示在组件中创建一个同名的计算属性，它返回对应状态的值。如果是对象，则可以指定计算属性的名称和对应状态的名称。 2. `mapGetters`：用于将 store 中的 getters 映射到组件的计算属性中。用法与 `mapState` 类似，只是参数要传入 getters 的名称。 3. `mapMutations`：用于将 store 中的 mutations 映射到组件的方法中。它接受一个数组或对象作为参数，数组中的元素可以是字符串或对象。如果是字符串，则表示在组件中创建一个同名的方法，它调用对应的 mutation。如果是对象，则可以指定方法的名称和对应 mutation 的名称。 4. `mapActions`：用于将 store 中的 actions 映射到组件的方法中。用法与 `mapMutations` 类似，只是参数要传入 actions 的名称。 这些辅助函数可以帮助我们在组件中更方便地使用 Vuex 提供的状态管理功能，减少了重复代码的编写。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值