vue vuex 学习小demo

创建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>