Vuex快速上手-CFANZ编程社区

Vuex快速上手

一、Vuex安装使用

安装Vue CLI

cnpm install -g @vue/cli

创建项目名称

vue create 项目名称

选择下载的模式

选择需要的配置

选择路由模式

是否需要保存当前的配置项（n）等操作（Y）
安装Vuex

cnpm install Vuex -S

引入并使用插件

import Vue from "vue"
import Vuex from "vuex";
Vue.use(Vuex);

创建公共的内存对象

const store = new Vuex().store({

})
export default stroe;

将Vuex在入口文件引入，挂载在Vue上

new Vue({
    store,
    render:h => h(app)
}).$mount('#app')

二、Vuex常用的配置项

state:存储公共状态
mutations:修改公共状态（必须是同步函数，只处理数据，不做逻辑）
actions:处理异步
modules:公共状态私有化
getters:公共状态计算属性

总结：mapMutions和mapActions是映射到methods上，mapState和mapGetter是映射到computed上

三、数据传递的流程

案例描述：

one.vue

<template>
    <div>
        <h2>这是一个One组件</h2>
        <p>{{$store.state.n}}</p>
        <button @click="handleAdd">点击</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            message:"lxc"
        }
    },
    created() {
        console.log(this);
    },
   methods:{
        handleAdd(){
           this.$store.dispatch("handleActionsAdd","lxc")
        }
   }
}
</script>

two.vue

<template>
    <div>
         <h2>这是一个Two组件</h2>
         <p>{{$store.state.n}}</p>
    </div>
</template>

store中的index.js

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        n: 10
    },
    actions: {
        handleActionsAdd({ commit }, params) {
            commit("handleMutationsAdd", params)
        }
    },
    mutations: {
        handleMutationsAdd(state) {
            state.n++;
        }
    }
})

export default store;

运行结果

四、Vuex的简易封装

let Vue;
function install(_Vue) {
    //vue.use是找到install方法，给他传递一个vue
    Vue = _Vue;
    Vue.mixin({
        //将store的实例挂在vue的实例身上   this.$store.state.属性
        beforeCreate() {

            if (this.$options.store) {
                Vue.prototype.$store = this.$options.store;
            }
        },
    })
}

class Store {
    //初始化
    constructor(options) {
        //将state中的状态转换为响应式状态
        this.state = new Vue({
            data: options.state
        })

        //初始化mutations
        this.mutations = options.mutations || {};

        //初始化actions
        this.actions = options.actions || {};
        
        //初始化getters
        options.getters && this.handleGetters(options.getters)
    }
    
    commit(eventName, params) {
        var fn = this.mutations[eventName];
        fn(this.state, params);
    }
    
    dispatch(eventName, params) {
        var fn = this.actions[eventName];
        fn({ commit: this.commit.bind(this), dispatch: this.dispatch.bind(this), state: this.state }, params);
    }
    
    handleGetters(getters) {
        var that = this;
        this.getters = {};

        Object.keys(getters).forEach(key => {
            Object.defineProperty(that.getters, key, {
                get: function () {
                    return getters[key](that.state);
                }
            })
        })
    }
}