Vuex快速上手

2020-02-21 本文已影响0人 learninginto

Vuex快速上手

通俗的解释：是一种最好的非父子组件传值的一种方案。

官方解释：Vuex是一个公共状态管理（公共的内存对象），它把所有组件需要共有的状态放到了一个公共的内存空间里。并且给每一个状态做了一个数据劫持(给每一个状态添加了一个getter和setter方法);

一、Vuex安装使用

安装Vue CLI

cnpm install -g @vue/cli

创建项目名称

vue create 项目名称

选择下载的模式

有default默认和Manually手动配置，通常选择Manually。（通过上下键进行选择）

选择需要的配置

空格选中，回车跳过。可以先选择必要的配置，其他需要的时候再安装。

vue-cli.png

选择路由模式

Use history mode for router?(是否使用history路由)

是否需要保存当前的配置项（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:存储公共状态
- mapState辅助函数
  
  当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数通过映射的关系将Vuex中的方法或者状态映射给组件的某一个属性
  
  注意：辅助函数的返回值都是一个对象。
语法：
1. 数组
  
  computed:mapState([“属性”,属性])
2. 对象（可以简化类名，或在映射时做更改）
  
  computed:{
  
  ...mapState({
  
  name:state=>state.userName
  
  })
  
  }
mutations:修改公共状态（必须是同步函数，只处理数据，不做逻辑）
mutations里面包含两个参数：

参数1 ：state

参数2 ：传递的参数
- mapMutations
  
  import {mapState} from "vuex";
注意：mapState辅助函数必须映射到组件的methods上

语法:
```
1. methods:{
```
...mapMutations(["函数名称"])

}
1. methods:{
...mapMutations({

新函数名称:"函数名称(必须是mutations里面的函数名称)"

})

}
actions:处理异步
actions里面包含两个参数：

参数1：一个对象{commit dispatch state getters ……}

参数2：传递的参数
- mapActions
  
  import {mapActions} from "vuex";
  
  同样，必须映射到组件的methods身上
语法：
1. methods:{
...mapActions(["函数名称"])

}
1. methods:{
...mapActions({

新函数名称:"函数名称(必须是mutations里面的函数名称)"

})

}

注意：在不需要处理异步的时候，可以跳过actions，在组件中直接调用commit触发Mutations。
modules:公共状态私有化
modules里面存放的是小型的Vuex，可以理解成它是一个小型的状态管理仓库集合。

modules里面的每一个模块的配置项与store里面配置同样会有store/getters/actions/mutations

注意：
1. 子模块在导出的时候切记一定要加namespaced:true , 以实现子模块私有化。
2. 当设置了namespaced:true后访问子模块的方法，必须通过子模块名/方法名称。
getters:公共状态计算属性
getter等价于computed，是一个计算属性。

getters中的函数，会有一个参数state，当前函数用来依赖state中的属性。当所依赖的state属性发生变化时会触发getters中的方法。
- mapGetters
  
  import {mapGetters} from "vuex"
  
  注意：getters的辅助函数必须映射到computed上
语法：
1. …mapGetter([“函数名称”])
2. ..mapGetters({
新名称 : "函数名称"

})

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

三、数据传递的流程

store中的数据通过辅助函数或this.$store.state.属性的方式渲染到组件上，组件需要通过this.$store.dispatch来调用actions中的函数，actions函数通过commit方法调用mutations方法，修改state中的数据。因为数据是响应式的，因此组件视图也随之改变。

Vuex.png

注意：基于这种数据传递的方式，所以，不能在组件内部使用v-model等来修改store中的数据。否则会导致错误难以理解。

通过提交 mutation 的方式，而非直接改变 store.state.count，是因为我们想要更明确地追踪到状态的变化。

案例描述：

one和two两个组件共用state的数据：在one组件中修改state，会调用one组件中的dispatch，进入store中的actions，通过commit接收，传送到store中的mutation中修改state的值，重新渲染页面，one和two组件的值被更新

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;

运行结果
state.gif

四、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);
                }
            })
        })
    }
}

Vuex快速上手

Vuex快速上手

一、Vuex安装使用

二、Vuex常用的配置项

三、数据传递的流程

四、Vuex的简易封装

猜你喜欢

热点阅读