【vuex】

vuex

  • 1 理解vuex
    • 1.1 vuex是什么
    • 1.2 什么时候使用vuex
    • 1.3 vuex工作原理图
    • 1.4 搭建vuex环境
    • 1.5 求和案例
      • 1.5.1 vue方式
      • 1.5.2 vuex方式
  • 2 vuex核心概念和API
    • 2.1 getters配置项
    • 2.2 四个map方法的使用
      • 2.2.1 mapState方法
      • 2.2.2 mapGetters方法
      • 2.2.3 mapActions方法
      • 2.2.4 mapMutations方法
      • 2.2.5 求和案例之四个map的使用
    • 2.3 多组件共享数据
    • 2.4 模块化+命名空间

1 理解vuex

1.1 vuex是什么

  • 概念:专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 Vue 应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。
    在这里插入图片描述
    在这里插入图片描述

1.2 什么时候使用vuex

  • 多个组件依赖于同一状态
  • 来自不同组件的行为需要变更同一状态

1.3 vuex工作原理图

在这里插入图片描述

1.4 搭建vuex环境

  • npm i vuex
vue2中,要用vuex的3版本
vue3中,要用vuex的4版本

在这里插入图片描述

  • Vue.use(Vuex)
    在这里插入图片描述
  • 创建store
    方法一:
    在这里插入图片描述
    方法二(推荐):
    在这里插入图片描述
  • vc ⇒ store
// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 引入插件vue-resource
import vueResource from 'vue-resource'
// 引入store
import store from './store/index'
// 关闭Vue的生产提示
Vue.config.productionTip = false

// 使用插件
Vue.use(vueResource)


// 创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    // store:store,
    store,
    // 安装全局事件总线
    beforeCreate(){
        Vue.prototype.$bus = this
    }
})

在这里插入图片描述

// 该文件用于创建Vuex中最为核心的store

// 引入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
export default new Vuex.Store({
    /* actions:actions,
    mutations:mutations,
    state:state, */
    // 简写为:
    actions,
    mutations,
    state,
})

// 暴露(导出)store
// export default store

在这里插入图片描述

1.5 求和案例

1.5.1 vue方式

  • App.vue代码:
<template>
  <div>
    <Count/>
  </div>
</template>

<script>
  import Count from './components/Count.vue'
  
  export default {
    name:'App',
    components:{Count},
  }
</script>
  • Count.vue代码:
<template>
    <div>
        <h1>当前求和为:{{sum}}</h1>
        <!-- 写法一 -->
        <!-- <select v-model="n">
            <option :value="1">1</option>加上冒号就是v-bind 双引号及其内的东西当作js表达式解析,为数字型;如不加冒号,则是字符串型
            <option :value="2">2</option>
            <option :value="3">3</option>
        </select> -->
        <!-- 写法二(强制转换) -->
        <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:'Count',
        data() {
            return {
                n:1, // 用户选择的数字
                sum:0 // 当前的和
            }
        },
        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 lang="css">
   button {
    margin-left: 5px;
   }
</style>

1.5.2 vuex方式

  • main.js代码:
// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 引入插件vue-resource
import vueResource from 'vue-resource'
// 引入store
import store from './store/index'
// 关闭Vue的生产提示
Vue.config.productionTip = false

// 使用插件
Vue.use(vueResource)


// 创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    // store:store,
    store,
    // 安装全局事件总线
    beforeCreate(){
        Vue.prototype.$bus = this
    }
})
  • index.js代码:
// 该文件用于创建Vuex中最为核心的store

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

// 准备actions--用于响应组件中的动作
const actions = {
    // 下列jia和jian没存在意义 所以可注释掉
    // jia:function(){ 简写为
    /* jia(context,value){ // context意思是上下文 把commit放进了context内
        // console.log('actions中的jia被调用了',context,value);
        context.commit('JIA',value)
    },

    jian(context,value){
        // console.log('actions中的jian被调用了',context,value);
        context.commit('JIAN',value)
    }, */

    jiaOdd(context,value){
        // console.log('actions中的jiaOdd被调用了',context,value);
        if(context.state.sum % 2){
            context.commit('JIA',value)
        }
    },

    jiaWait(context,value){
        // console.log('actions中的jiaWait被调用了',context,value);
        setTimeout(()=>{
            context.commit('JIA',value)
        },500)
    }
}
// 准备mutations--用于操作数据(state)
const mutations = {
    JIA(state,value){
        // console.log('mutations中的JIA被调用了',state,value);
        state.sum += value
    },

    JIAN(state,value){
        state.sum -= value
    }
}
// 准备state--用于存储数据
const state = {
    sum:0 // 当前的和
}

// 创建并暴露store
export default new Vuex.Store({
    /* actions:actions,
    mutations:mutations,
    state:state, */
    // 简写为:
    actions,
    mutations,
    state,
})

// 暴露(导出)store
// export default store
  • Count.vue代码:
<template>
    <div>
        <h1>当前求和为:{{$store.state.sum}}</h1>
        <!-- 写法一 -->
        <!-- <select v-model="n">
            <option :value="1">1</option>加上冒号就是v-bind 双引号及其内的东西当作js表达式解析,为数字型;如不加冒号,则是字符串型
            <option :value="2">2</option>
            <option :value="3">3</option>
        </select> -->
        <!-- 写法二(强制转换) -->
        <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:'Count',
        data() {
            return {
                n:1, // 用户选择的数字
            }
        },
        methods: {
            // 加
            increment(){
                // 如经过actions这样写:
                // this.$store.dispatch('jia',this.n) // $store是在vc身上
                // 如不经过actions这样写:
                this.$store.commit('JIA',this.n)
            },
            // 减
            decrement(){
                // 如经过actions这样写:
                // this.$store.dispatch('jian',this.n)
                // 如不经过actions这样写:
                this.$store.commit('JIAN',this.n)
            },
            // 当前求和为奇数再加
            incrementOdd(){
                if(this.$store.state.sum % 2) {
                    this.$store.dispatch('jiaOdd',this.n)
                }
            },
            // 等一等再加
            incrementWait(){
                this.$store.dispatch('jiaWait',this.n)
            }
        }
    }
</script>

<style lang="css">
   button {
    margin-left: 5px;
   }
</style>

在这里插入图片描述

2 vuex核心概念和API

2.1 getters配置项

  • 概念:当state中的数据需要经过加工后再使用时,可以使用getters加工。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

2.2 四个map方法的使用

2.2.1 mapState方法

  • 用于帮助我们映射state中的数据为计算属性
computed: {
	//借助mapState生成计算属性:sum、school、subject(对象写法)
    ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成计算属性:sum、school、subject(数组写法)
    ...mapState(['sum','school','subject']),
},

2.2.2 mapGetters方法

  • 用于帮助我们映射getters中的数据为计算属性
computed: {
    //借助mapGetters生成计算属性:bigSum(对象写法)
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性:bigSum(数组写法)
    ...mapGetters(['bigSum'])
},

2.2.3 mapActions方法

  • 用于帮助我们生成与actions对话的方法,即:包含$store.dispatch(xxx)的函数
methods:{
    //靠mapActions生成:incrementOdd、incrementWait(对象形式)
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

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

2.2.4 mapMutations方法

  • 用于帮助我们生成与mutations对话的方法,即:包含$store.commit(xxx)的函数
methods:{
    //靠mapActions生成:increment、decrement(对象形式)
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成:JIA、JIAN(对象形式)
    ...mapMutations(['JIA','JIAN']),
}
  • 备注:mapActions与mapMutations使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象。

2.2.5 求和案例之四个map的使用

  • Count.vue代码:
<template>
    <div>
        <h1>当前求和为:{{sum}}</h1>
        <h3>当前求和放大10倍后为:{{bigSum}}</h3>
        <h3>我在{{school}}学习{{subject}}</h3>
        <!-- 写法一 -->
        <!-- <select v-model="n">
            <option :value="1">1</option>加上冒号就是v-bind 双引号及其内的东西当作js表达式解析,为数字型;如不加冒号,则是字符串型
            <option :value="2">2</option>
            <option :value="3">3</option>
        </select> -->
        <!-- 写法二(强制转换) -->
        <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="JIA(n)">+</button>
        <button @click="JIAN(n)">-</button>
        <!-- <button @click="incrementOdd(n)">当前求和为奇数再加</button>
        <button @click="incrementWait(n)">等一等再加</button> -->
        <button @click="jiaOdd(n)">当前求和为奇数再加</button>
        <button @click="jiaWait(n)">等一等再加</button>
    </div>
</template>

<script>
    // 引入
    import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

    export default {
        name:'Count',
        data() {
            return {
                n:1, // 用户选择的数字
            }
        },
        computed:{
            // 靠程序员自己亲自去写计算属性
            /*  sum(){
                return this.$store.state.sum
            },
            school(){
                return this.$store.state.school
            },
            subject(){
                return this.$store.state.subject
            }, */
            // 借助mapState生成计算属性,从state中读取数据(对象写法)
            // 在一个Obj1里面 ...Obj2, 表示把Obj2里面的每一项key:value展开放入Obj1中
            // ...mapState({sum:'sum',school:'school',subject:'subject'}),
            // 借助mapState生成计算属性,从state中读取数据(数组写法)
            ...mapState(['sum','school','subject']),
            
            // ****************************************************************************

            // 靠程序员自己亲自去写计算属性
            /* bigSum(){
                return this.$store.getters.bigSum
            } */
            // 借助mapGetters生成计算属性,从getters中读取数据(对象写法)
            // ...mapGetters({bigSum:'bigSum'})
            // 借助mapGetters生成计算属性,从getters中读取数据(数组写法)
            ...mapGetters(['bigSum'])
        },
        methods: {
            // 程序员亲自写方法
            // 加
           /*  increment(){
                // 如经过actions这样写:
                // this.$store.dispatch('jia',this.n) // $store是在vc身上
                // 如不经过actions这样写:
                this.$store.commit('JIA',this.n)
            }, */
            // 减
            /* decrement(){
                // 如经过actions这样写:
                // this.$store.dispatch('jian',this.n)
                // 如不经过actions这样写:
                this.$store.commit('JIAN',this.n)
            },*/

            // 借助mapMutations生成对应的方法,方法中会调用commit为联系mutations(对象写法)
            // ...mapMutations({increment:'JIA',decrement:'JIAN'}),
            // ...mapMutations({JIA:'JIA',JIAN:'JIAN'}),
            // 借助mapMutations生成对应的方法,方法中会调用commit为联系mutations(数组写法)
            ...mapMutations(['JIA','JIAN']),

            // ****************************************************************************

            // 程序员亲自写方法
            // 当前求和为奇数再加
            /* incrementOdd(){
                if(this.$store.state.sum % 2) {
                    this.$store.dispatch('jiaOdd',this.n)
                }
            },
            // 等一等再加
            incrementWait(){
                this.$store.dispatch('jiaWait',this.n)
            }, */

            // 借助mapActions生成对应的方法,方法中会调用dispatch为联系actions(对象写法)
            // ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
            // ...mapActions({jiaOdd:'jiaOdd',jiaWait:'jiaWait'}),
            // 借助mapActions生成对应的方法,方法中会调用dispatch为联系actions(数组写法)
            ...mapActions(['jiaOdd','jiaWait']),
        },
        /* mounted() {
            console.log('Count',this.$store);
        } */
    }
</script>

<style lang="css">
   button {
    margin-left: 5px;
   }
</style>

在这里插入图片描述

2.3 多组件共享数据

在这里插入图片描述

  • App.vue代码:
<template>
  <div>
    <Count/>
    <hr>
    <Person/>
  </div>
</template>

<script>
  import Count from './components/Count.vue'
  import Person from './components/Person.vue'
  
  export default {
    name:'App',
    components:{Count,Person},
  }
</script>
  • index.js代码:
// 该文件用于创建Vuex中最为核心的store

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

// 准备actions--用于响应组件中的动作
const actions = {
    // 下列jia和jian没存在意义 所以可注释掉
    // jia:function(){ 简写为
    /* jia(context,value){ // context意思是上下文 把commit放进了context内
        // console.log('actions中的jia被调用了',context,value);
        context.commit('JIA',value)
    },

    jian(context,value){
        // console.log('actions中的jian被调用了',context,value);
        context.commit('JIAN',value)
    }, */

    jiaOdd(context,value){
        // console.log('actions中的jiaOdd被调用了',context,value);
        if(context.state.sum % 2){
            context.commit('JIA',value)
        }
    },

    jiaWait(context,value){
        // console.log('actions中的jiaWait被调用了',context,value);
        setTimeout(()=>{
            context.commit('JIA',value)
        },500)
    }
}
// 准备mutations--用于操作数据(state)
const mutations = {
    JIA(state,value){
        // console.log('mutations中的JIA被调用了',state,value);
        state.sum += value
    },

    JIAN(state,value){
        // console.log('mutations中的JIAN被调用了',state,value);
        state.sum -= value
    },

    ADD_PERSON(state,value){
        // console.log('mutations中的ADD_PERSON被调用了',state,value);
        state.personList.unshift(value)
    }
}
// 准备state--用于存储数据
const state = {
    sum:0, // 当前的和
    school:'霍格沃兹魔法学院',
    subject:'前端',
    personList:[
        {id:'001',name:'小王'}
    ]
}
// 准备getters配置项--用于将state中的数据进行加工
const getters = {
    bigSum(state){
        return state.sum*10
    }
}

// 创建并暴露store
export default new Vuex.Store({
    /* actions:actions,
    mutations:mutations,
    state:state, */
    // 简写为:
    actions,
    mutations,
    state,
    getters
})

// 暴露(导出)store
// export default store
  • Count.vue代码:
<template>
    <div>
        <h1>当前求和为:{{sum}}</h1>
        <h3>当前求和放大10倍后为:{{bigSum}}</h3>
        <h3>我在{{school}}学习{{subject}}</h3>
        <h3 style="color:red">Person组件的总人数是:{{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:'Count',
        data() {
            return {
                n:1, // 用户选择的数字
            }
        },
        computed:{
            // 借助mapState生成计算属性,从state中读取数据(数组写法)
            ...mapState(['sum','school','subject','personList']),
            
            // 借助mapGetters生成计算属性,从getters中读取数据(数组写法)
            ...mapGetters(['bigSum'])
        },
        methods: {
            // 借助mapMutations生成对应的方法,方法中会调用commit为联系mutations(对象写法)
            ...mapMutations({increment:'JIA',decrement:'JIAN'}),

            // 借助mapActions生成对应的方法,方法中会调用dispatch为联系actions(对象写法)
            ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
        },
        /* mounted() {
            console.log('Count',this.$store);
        } */
    }
</script>

<style lang="css">
   button {
    margin-left: 5px;
   }
</style>
  • Person.vue代码:
<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color:red">Count组件求和为:{{sum}}</h3>
    <input type="text" placeholder="请输入名字" v-model="name">
    <button @click="add">添加</button>
    <ul>
        <li v-for="p in personList" :key="p.id">{{p.name}}</li>
    </ul>
  </div>
</template>

<script>
    import {nanoid} from 'nanoid'

    export default {
        name:'Person',
        data(){
            return {
                name:''
            }
        },
        computed: {
            personList() {
                return this.$store.state.personList
            },
            sum() {
                return this.$store.state.sum
            }
        },
        methods: {
            add() {
                const personObj = {id:nanoid(),name:this.name}
                // console.log(personObj);
                this.$store.commit('ADD_PERSON',personObj)
                this.name = '' // 添加完成后 输入框为空
            }
        },
    }
</script>

在这里插入图片描述

2.4 模块化+命名空间

  • 目的:让代码更好维护,让多种数据分类更加明确。
  • index.js修改为:在这里插入图片描述
// 该文件用于创建Vuex中最为核心的store

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

import axios from 'axios'
import {nanoid} from 'nanoid'

// 求和相关的配置
const countOptions = {
    namespaced:true, // 开启命名空间
    actions:{
        jiaOdd(context,value){
            // console.log('actions中的jiaOdd被调用了',context,value);
            if(context.state.sum % 2){
                context.commit('JIA',value)
            }
        },
    
        jiaWait(context,value){
            // console.log('actions中的jiaWait被调用了',context,value);
            setTimeout(()=>{
                context.commit('JIA',value)
            },500)
        }
    },
    mutations:{
        JIA(state,value){
            // console.log('mutations中的JIA被调用了',state,value);
            state.sum += value
        },
    
        JIAN(state,value){
            // console.log('mutations中的JIAN被调用了',state,value);
            state.sum -= value
        },
    },
    state:{
        sum:0, // 当前的和
        school:'霍格沃兹魔法学院',
        subject:'前端',
    },
    getters:{
        bigSum(state){
            return state.sum*10
        }
    }
}

// 人员管理相关的配置
const personOptions = {
    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 => {
                    context.commit('ADD_PERSON',{ID:nanoid(),name:response.data})
                },
                error => {
                    alert(error.message)
                }
            )
        }
    },
    mutations:{
        ADD_PERSON(state,value){
            // console.log('mutations中的ADD_PERSON被调用了',state,value);
            state.personList.unshift(value)
        }
    },
    state:{
        personList:[
            {id:'001',name:'小王'}
        ]
    },
    getters:{
        firstPersonName(state){
            return state.personList[0].name
        }
    }
}

// 准备actions--用于响应组件中的动作
/* const actions = {
    jiaOdd(context,value){
        // console.log('actions中的jiaOdd被调用了',context,value);
        if(context.state.sum % 2){
            context.commit('JIA',value)
        }
    },

    jiaWait(context,value){
        // console.log('actions中的jiaWait被调用了',context,value);
        setTimeout(()=>{
            context.commit('JIA',value)
        },500)
    }
} */
// 准备mutations--用于操作数据(state)
/* const mutations = {
    JIA(state,value){
        // console.log('mutations中的JIA被调用了',state,value);
        state.sum += value
    },

    JIAN(state,value){
        // console.log('mutations中的JIAN被调用了',state,value);
        state.sum -= value
    },

    ADD_PERSON(state,value){
        // console.log('mutations中的ADD_PERSON被调用了',state,value);
        state.personList.unshift(value)
    }
} */
// 准备state--用于存储数据
/* const state = {
    sum:0, // 当前的和
    school:'霍格沃兹魔法学院',
    subject:'前端',
    personList:[
        {id:'001',name:'小王'}
    ]
} */
// 准备getters配置项--用于将state中的数据进行加工
/* const getters = {
    bigSum(state){
        return state.sum*10
    }
} */

// 创建并暴露store
export default new Vuex.Store({
    /* actions:actions,
    mutations:mutations,
    state:state, */
    // 简写为:
    /* actions,
    mutations,
    state,
    getters */

    modules:{
        countAbout:countOptions,
        personAbout:personOptions
    }
})

// 暴露(导出)store==
// export default store
  • Count.vue改为:
    在这里插入图片描述
<template>
    <div>
        <h1>当前求和为:{{sum}}</h1>
        <h3>当前求和放大10倍后为:{{bigSum}}</h3>
        <h3>我在{{school}}学习{{subject}}</h3>
        <h3 style="color:red">Person组件的总人数是:{{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:'Count',
        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('Count',this.$store);
        } */
    }
</script>

<style lang="css">
   button {
    margin-left: 5px;
   }
</style>
  • Person.vue改为:
    在这里插入图片描述
<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color:red">Count组件求和为:{{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'

    export default {
        name:'Person',
        data(){
            return {
                name:''
            }
        },
        computed: {
            personList() {
                return this.$store.state.personAbout.personList
            },
            sum() {
                return this.$store.state.countAbout.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>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/228964.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【思路代码详解】2023mathorcup大数据复赛B题妈妈杯高校数学建模挑战赛电商零售商家需求预测及库存优化问题

2023 年 MathorCup 高校数学建模挑战赛——大数据竞赛 赛道 B复赛&#xff1a;电商零售商家需求预测及库存优化问题 问题一 目标&#xff1a;制定补货计划&#xff0c;基于预测销量。 背景&#xff1a;固定库存盘点周期NRT1, 提前期LT3天。 初始条件&#xff1a;所有商品…

temu日本站在哪里入驻

在跨境电商领域中&#xff0c;Temu是拼多多推出的一款备受瞩目的平台。如今&#xff0c;越来越多的商家希望将自己的业务扩展到日本市场&#xff0c;而在Temu日本站上入驻就成为了一个不可忽视的机遇。本文将为您介绍如何在Temu日本站上入驻&#xff0c;并提供一些有用的技巧和…

excel做预测的方法集合

一. LINEST函数 首先&#xff0c;一元线性回归的方程&#xff1a; y a bx 相应的&#xff0c;多元线性回归方程式&#xff1a; y a b1x1 b2x2 … bnxn 这里&#xff1a; y - 因变量即预测值x - 自变量a - 截距b - 斜率 LINEST的可以返回回归方程的 截距(a) 和 斜…

Spring Boot实现接口幂等

Spring Boot实现接口幂等 1、pom依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http:…

记一次xss通杀挖掘历程

前言 前端时间&#xff0c;要开放一个端口&#xff0c;让我进行一次安全检测&#xff0c;发现的一个漏洞。 经过 访问之后发现是类似一个目录索引的端口。(这里上厚码了哈) 错误案例测试 乱输内容asdasffda之后看了一眼Burp的抓包&#xff0c;抓到的内容是可以发现这是一个…

12.08

1.头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QDebug>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);~Widget(); signals:v…

2023五岳杯量子计算挑战赛数学建模思路+模型+代码+论文

赛题思路&#xff1a;12月6日晚开赛后第一时间更新&#xff0c;获取见文末名片 “五岳杯”量子计算挑战赛&#xff0c;是国内专业的量子计算大赛&#xff0c;也是玻色量子首次联合移动云、南方科技大学共同发起的一场“企校联名”的国际竞赛&#xff0c;旨在深度融合“量子计算…

正则表达式(7):转义符

正则表达式&#xff08;7&#xff09;&#xff1a;正则表达式&#xff08;5&#xff09;&#xff1a;转义符 本博文转载自 此处&#xff0c;我们来认识一个常用符号&#xff0c;它就是反斜杠 “\” 反斜杠有什么作用呢&#xff1f;先不着急解释&#xff0c;先来看个小例子。 …

TCP传输层详解(计算机网络复习)

介绍&#xff1a;TCP/IP包含了一系列的协议&#xff0c;也叫TCP/IP协议族&#xff0c;简称TCP/IP。该协议族提供了点对点的连接机制&#xff0c;并将传输数据帧的封装、寻址、传输、路由以及接收方式都予以标准化 TCP/IP的分层模型 在讲TCP/IP协议之前&#xff0c;首先介绍一…

Python列表的排序方法:从基础到高级

更多Python学习内容&#xff1a;ipengtao.com 大家好&#xff0c;我是彭涛&#xff0c;今天为大家分享 Python列表的排序方法&#xff1a;从基础到高级&#xff0c;全文3400字&#xff0c;阅读大约10分钟。 在Python中&#xff0c;列表是一种常用的数据结构&#xff0c;而对列表…

<习题集><LeetCode><链表><61/83/82/86/92>

61. 旋转链表 https://leetcode.cn/problems/rotate-list/ public ListNode rotateRight(ListNode head, int k) {//k等于0&#xff0c;或者head为空&#xff0c;直接返回head&#xff1b;if(k 0 || head null){return head;}//创建last用于记录尾节点&#xff0c;移动last找…

vue 使用 h函数

我的项目前端使用的vben-admin框架。现在有个需求需要在列表中显示一个自定义链接 先贴出做成功的效果如下图。 在做之前通过咨询和搜索得知 可以用vue的h函数来返回一个dom。 那我就去看vue官网对于h函数的说明和示例&#xff0c;大致浏览了一页&#xff0c;感觉还是有点迷糊…

实时动作识别学习笔记

目录 yowo v2 yowof 判断是在干什么,不能获取细节信息 yowo v2 https://github.com/yjh0410/YOWOv2/blob/master/README_CN.md ModelClipmAPFPSweightYOWOv2-Nano1612.640ckptYOWOv2-Tiny

SpringBoot系列之启动成功后执行业务的方法归纳

SpringBoot系列之启动成功后执行业务逻辑。在Springboot项目中经常会遇到需要在项目启动成功后&#xff0c;加一些业务逻辑的&#xff0c;比如缓存的预处理&#xff0c;配置参数的加载等等场景&#xff0c;下面给出一些常有的方法 实验环境 JDK 1.8SpringBoot 2.2.1Maven 3.2…

Gerber文件使用详解

目录 概述 一、Gerber 格式 二、接线图示例 三、顶层丝印 四、顶级阻焊层 五、顶部助焊层 六、顶部&#xff08;或顶部铜&#xff09; 七、钻头 八、电路板概要 九、使用文本和字体进行 Gerber 导出 十、总结 概述 Gerber文件:它们是什么? PCB制造商如何使用它们? …

C# 编程新手必看,一站式学习网站,让你轻松掌握 C# 技能!

介绍&#xff1a;实际上&#xff0c;您可能弄错了&#xff0c;C#并不是一种独立的编程语言&#xff0c;而是一种由微软公司开发的面向对象的、运行于.NET Framework之上的高级程序设计语言。C#看起来与Java十分相似&#xff0c;但两者并不兼容。 C#的设计目标是简单、强大、类型…

智能优化算法应用:基于战争策略算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于战争策略算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于战争策略算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.战争策略算法4.实验参数设定5.算法结果6.参考…

轻松操纵SQL:Druid解析器实践

一、背景 在BI&#xff08;Business Intelligence&#xff09;场景中&#xff0c;用户会频繁使用SQL查询语句&#xff0c;但在平台运作过程中&#xff0c;面临着权限管理、多数据源处理和表校验等多种挑战。 例如&#xff0c;用户可能不清楚自身是否具备对特定表&#xff08;…

极简模式,助力宏观数据监控

随着UWA GOT Online采样的参数越来越多样化&#xff0c;为了提升开发者的使用体验&#xff0c;我们最新推出了三种预设数据采集方案&#xff1a;极简模式、CPU模式、内存模式。该更新旨在降低多数据采集对数据准确性的干扰&#xff0c;同时也为大家提供更精准且有针对性的数据指…

15.Eclipse常用基本配置设置

在使用Eclipse进行Java开发之前&#xff0c;经常需要进行一些配置&#xff0c;其中有些配置甚至是必须的&#xff0c;即使开始不编辑之后开发过程中也会出一些因配置导致的小问题。本文梳理了一下Eclipse使用中常用的配置 1 编码配置 1.1 设置工作空间编码格式 打开Eclipse&…