vue vuex 学习小demo

左手的ㄟ右手 2023-07-06 14:47 10阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70][]

### 创建store.js ###

**引入并使用vuex**

**import Vuex from 'vuex'**

**Vue.use(Vuex)**

**1.使用**new Vuex.Store创建(\{\}）创建store

2.创建state:\{\}存放数据

3.mutations:\{\}存放方法

4.actions:\{\}用于调用异步方法

5.getters:\{\}用于数据计算

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
        //仓库数据
        state:{
            count:0,
            name:"Winter Wang"
        },
        //方法 接收参数为state中的数据
        mutations:{
            add(state){
                state.count++
            },
            sub(state){
                state.count--
            },
            addN(state,step){
                state.count+=step
            },
            subN(state,step){
                state.count-=step
            }
        },
        //如果actions里面想要修改store里面的数据，只能通过commit去触发mutations里面的方法
        //不能直接修改
        //context.commit('add')触发mutations里面的方法变成异步
        actions:{
            addAsync(context){
                setTimeout(()=>{
                    context.commit('add')
                },2000)
            },
            subAsync(context,step){
                setTimeout(()=>{
                    context.commit('subN',step)
                },2000)
            },
        },
        //用于对store里面的数据进行加工处理形成新的数据
        //store中的数据变化之后，getter包装中的数据也会跟着变化
        //getters不会修改store里面的数据
        getters:{
            showNum:state=>{
                return `${state.name}调用的是${state.count}`
            }
        }
    })

### Add.vue 上半部分加的组件 ###

//vuex中不允许组件直接修改store中的数据逻辑
    //只能展示，逻辑在vuex中处理
    //方便集中管理状态
    <template>
        <div>
            <h3>当前最新count的值为：{
       {count}}</h3>
            <h2>{
       {showNum}}</h2>
            <button @click="handleAdd">+1</button>
            <button @click="handleAddN">+10</button>
            <button @click="addAsync">延时+1</button>
        </div>
    </template>
    
    <script>
    import {mapState,mapMutations,mapActions,mapGetters} from 'vuex'
    export default {
        data(){
            return{
    
            }
        },
        methods:{
            handleAdd(){
                this.add()
            },
            handleAddN(){
                //commit用来调用某个mutations里面的函数
                 this.$store.commit('addN',10)
            },
    
            //调用Mutations的第二种方法
            ...mapMutations(['add',"addN"]),
    
            //调用Actions里面的方法，方法如果是...映射过来，是可以直接用的，不需要再添加一个事件去接收
            ...mapActions(['addAsync'])
        },
        //使用计算属性调取state中的数据
        computed:{
            ...mapState(["count"]),
            ...mapGetters(['showNum'])
        }
    }
    </script>

### Sub.vue组件 ###

<template>
        <div>
            <h3>当前最新count的值为：{
       {count}}</h3>
            <button @click="handleSub">-1</button>
            <button @click="handleSubN">延时-10</button>
        </div>
    </template>
    
    <script>
    //引入vuex要用的内容
    import {mapState,mapMutations,mapActions} from 'vuex'
    export default {
        data(){
            return{
                
            }
        },
        methods:{
            //调用Mutations要用的方法
            ...mapMutations(['sub']),
            //在自定义的click事件里，调用this.sub()即可
            handleSub(){
                this.sub()
            },
    
            //调用Actions里面的异步方法
            ...mapActions(['subAsync']),
            handleSubN(){
                this.subAsync(10)
            }
        },
        computed:{
            ...mapState(["count"])
        }
    }
    </script>

### 父组件 index.vue ###

<template>
        <div>
            <Add></Add>
            <p>--------------------</p>  
            <Sub></Sub>
        </div>
    </template>
    
    <script>
    import Add from './Add.vue'
    import Sub from './Sub.vue'
    export default {
        components:{
            Add,Sub
        },
        data(){
            return{
                
            }
        }
    }
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200219215607967.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ==,size_16,color_FFFFFF,t_70