【前端】Vue2全家桶案例《看漫画》之三、引入vuex

转载请注明出处：http://www.cnblogs.com/shamoyuu/p/vue_vux_app_3.html

项目github地址：https://github.com/shamoyuu/vue-vux-iconan

这一章我们简单地介绍一下vuex，然后引入它做一个简单的功能，后面用到我们再说。

首先，vuex是什么？引用一下官方文档：

“Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。”

好抽象有木有？我第一次看见这句话的时候完全不知道在说什么，可能是我笨o(╥﹏╥)o。

后来懂了才发现其实很简单，我举几个例子解释一下。

1：小张在做个人中心页面，在登录前显示默认的头像和昵称，要求登录后显示用户的头像和昵称。但是登录页与个人中心页不是父子关系，而且有很多渠道可以打开登录页。

2：小李在做悬浮购物车，要求有商品加入后就更新悬浮购物车上显示的数量。但是商品加车可以在很多页面操作，比如列表页，搜索页，详情页，推荐页等等。

3：小王在做设置页，要求在用户绑定/修改手机号后，其他页面同步显示最新的手机号。修改手机号只有一处，但是需要显示手机号的地方却很多。

vuex就是用来解决这样的问题的。虽然不用vuex也可以通过一些其他的方法实现，但是在项目变大后，就越来越难维护了。

简介就到这里，下面我们来实际使用一下。

首先引入vuex

npm install --save-dev vuex

然后新建一个/tool/store/store.js文件，用来保存和获取我们上面说到的“头像昵称”、“购物车商品”、“手机号”

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const state = {
    count: 1,
    author: "静茹♂鱼"
};

const mutations = {
    add(state){
        state.count += 1;
    },
    reduce(state){
        state.count -= 1;
    }
};

const getters = {
    author (state) {
        return "❤❤❤" + state.author + "❤❤❤";
    }
};

export default new Vuex.Store({
    state,
    mutations,
    getters
});

然后我们新建一个测试文件Test.vue，就简简单单地来测试一下vuex这几个简单的方法。

<template>
    <div>
        <h1>{{count}}</h1>
        <hr>
        <button @click="$store.commit('add')">加</button>
        <hr>
        <button @click="$store.commit('reduce')">减</button>
        <hr>
        <button @click="foo">查看</button>
        <hr> {{author}}
    </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";

export default {
    data() {
        return {};
    },
    methods: {
        foo: function() {
            console.info(this.$store.state.count);
        }
    },
    mounted: function() {},
    computed: {
        ...mapState(["count"]),
        ...mapGetters(["author"])
    }
};
</script>

<style scoped>

</style>

点击加减就会操作store里的count数，点击查看就能从js里获取到store的count。而author（或许应该称为getAuthor）就能通过getter的方式获取到store.author。