vuex基本使用

1. State：提供唯一公共数据源， 所有需要共享的数据都要统一放到Store的State中进行存储。

// 创建store数据源， 提供唯一公共数据

const store = new Vuex.Store({
    state:{
        num: 0
    }
})

组件中访问State中数据的第一种方式：

this.$store.state.全局数据名称

组件中访问State中数据的第二种方式：

// 从vuex中按需引入mapState函数

import { mapState } from "vuex"

通过导入的mapState函数， 将当前组件需要的全局数据， 映射为当前组件的computed计算属性：

// 将全局数据， 映射为当前组件的计算属性

computed: {
    ...mapState(["num"])
}

计算属性的使用也就是在需要这个值的地方{{  num }} 就可以了。

2.Mutation：用于变更Store中的数据 （不能直接通过$store修改数据）

 只能通过mutation变更Store数据， 不可以直接操作Store中的数据

 mutation可以集中监控数据的变化， 方便后期的维护

// 定义mutation

const store = new Vuex.Store({
    mutations: {
        num(state){
            // 变更状态    
            state.num ++
        }
    }
})

在组件中调用mutation函数

// 触发mutation

methods:{
    handlel(){
        // 触发 mutations 的第一种方式
        this.$store.commit('num')
    }
}

触发mutations传递参数， step是外界传递进来的参数

// 定义mutation

const store = new Vuex.Store({
    mutations: {
        num(state， step){
            // 变更状态    
            state.num += step
        }
    }
})

// 触发mutation

methods:{
    handlel(){
        // 触发 mutations 的第一种方式
        this.$store.commit('num'， 2)
    }
}

 触发mutations的第二种方式：

// 从vuex中按需导入Mutations函数

import { mapMutations } from 'vuex'

将需要的mutations函数， 映射为当前组件的methods方法

methods:{
    ...mapMutations(['num'])
}

3.Action: 触发actions异步任务时携带参数

// 定义Action


const store = new Vuex.Store({
    actions: {
        numAsync(context， step){
            setTimeout(() => {context.commit('num', step)}, 1000)
        }
    }
})

// 触发Action

methods:  {
    handle(){

        // 在调用 dispatch函数，
        // 触发actions时携带参数
        this.$store.dispatch('numAsync', 5)
    }

}

触发actions的第二种方式

// 从vuex中按需导入Actions函数

import { mapAction } from 'vuex'

// 触发

methods:{
    handlel(){
        ...mapActions(['numAsync'])
    }
}

 4. Getter: 对Store中的数据进行处理 形成新的数据，

不会修改State中的原始数据

Store中数据发生变化，Getter中的数据也会跟着变

// 定义Action


const store = new Vuex.Store({
    getters: {
        showNum: state => {
            return '......'
        }
    }
})

使用getters方式1：

this.$store.getters.名称

使用getters方式2：

import { mapGetters} from 'vuex'

computed:{
    ...mapGetters(['showNum'])
}