2018-08-15

Vuex简介

前言

之前提到过几种组件之间传值的方法，可以解决一般的组件传值问题。但是当组件内的传值关系过于复杂时，比如在单页面应用内，使用bus总线也会变得很麻烦，这时vue官方给我们提供了一个工具，它就是Vuex，专门用来解决复杂的组件传值问题。

vuex

Vuex 从一张图说起

vuex

虚线框内的为公用数据存取区域，我们把数据放在这个空间，如果一个组件改变了其中的值，其他组件都能感知到，这就是vuex的设计理念。

流程简介

所有公用数据放在state中，某个组件想用这里的数据，直接调用就行

有时候我们想要改变state里面的数据，但是我们不能直接让组件直接改变公用数据，必须走一个流程。比如异步操作或者大量的同步操作，我们先通过dispatch调用actions，然后通过commit调用mutations，通过mutate最终才能改变state的值。vuex就是这样一个单向数据改变流程。当然，不复杂的操作也可以用组件直接通过commit调用mutation跳过actions来改变state的值。

state

Vuex 使用单一状态树，它是唯一数据源，包含了全部的应用层级状态，其实简单来说就是公共数据。类似于全局变量或者localStorage。

state: {
    //存放组件的公共数据
    city: "北京"
}

actions

actions就是一个中转站，接收dispatch传来的事件和参数，通过commit提交给mutation，一般用于异步操作或者大量的同步操作。

Action 提交的是 mutation，而不是直接变更状态。

Action 可以包含任意异步操作。

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation

actions: {
    //接收this.$store通过dispatch传来的事件与参数
    // ctx: 执行上下文
    changeCity(ctx, city) {
        console.log(city);
        ctx.commit('change', city);
    }
},

mutation

mutation可以通过接收commit传来事件与参数，改变stage里的数据。

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和一个 回调函数 (handler)。

mutations: {
    //接收actions通过commit传来事件与参数
    //state: 公共数据state
    change(state, city) {
        state.city = city
    }
}

写个Demo

写个小demo，通过点击子组件二内的按钮，改变所有组件内的city。

首先引入vuex，一般项目工程可以通过npm安装

1	npm install vuex --save

然后在js文件中引用vue和vuex

1 2	import Vue from 'Vue' import Vuex from 'Vuex'

由于这只是个简易Demo，不需要使用npm来安装，可以直接通过<script>标签形式来引用

1 2	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>

正式代码

<div id="root">
    <counter1></counter1>
    <counter2></counter2>
    <div class="city">现在城市: {{this.$store.state.city}}</div>
</div>
<script>
    var myStore = new Vuex.Store({
        state: {
            //存放组件的公共数据
            city: "北京"
        },
        actions: {
            //接收this.$store通过dispatch传来的事件与参数
            // ctx: 执行上下文
            changeCity(ctx, city) {
                console.log(city);
                ctx.commit('change', city);
            }
        },
        mutations: {
            //接收actions通过commit传来事件与参数
            //state: 公共数据state
            change(state, city) {
                state.city = city
            }
        }
    });

    var counter1 = {
        template: `<div class='div1'>组件一：{{this.$store.state.city}}</div > `,
    }

    var counter2 = {
        data: function () {
            return {
                cities: ['北京', '深圳', '广州', '上海']
            }
        },
        template: `<div class='div2'>
                        <div >组件二：{{this.$store.state.city}}</div >
                        <button v-for="item of cities"  @click="handleClick(item)">{{item}}</button >                   
    			  </div>
                   `,
        methods: {
            handleClick: function (city) {
                //this.$store通过dispatch传递事件与参数给actions
                this.$store.dispatch('changeCity', city)
            }
        }
    }

    var vm = new Vue({
        el: '#root',
        store: myStore,
        components: {
            counter1: counter1,
            counter2: counter2
        }
    })
</script>

效果

See the Pen Vuex简易Demo by Sanakey (@Sanakey) on CodePen.

结语

这里只是简单介绍了一下vuex，算是一个入门介绍，vuex还有很多高级内容，不是三言两语就能说明白的，目前自己水平有限，以后水平提高了有时间再来聊聊。感谢阅读~~

本文标题:Vuex简介

文章作者:Sanakey

发布时间:2018-08-15, 20:18:23

最后更新:2018-08-16, 10:31:13

原始链接:https://sanakey.github.io/2018/08/15/Vuex简介/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

感谢打赏，错误之处欢迎指正交流(`・ω・´) !~~