第一节：初识vuex

什么是vuex？

vuex是专门为vue.js设计的集中式状态管理架构。 那么什么是状态？状态可以理解为不同组件中共用的data属性。

为什么要使用vuex？

做项目的时，难免会有组件之间的传值。我们都知道，对于父子组件之间的传值，父传子通过props，子传父通过事件机制，也就是子通过$emit发射参数，父通过$on接受。非父子组件通过创建一个公共的的Vue实例，其实也是利用了父子组件传值的方法。

但是如果组件之间的通信很多，而且多个组件嵌套，这样不仅增加了传值的难度，把业务逻辑搞复杂，而且会对数据的管理特别混乱。而vuex很好的解决了这一问题。

初体验

引入vuex

1、安装vuex

 npm install vuex --save

一定要加--save，因为这个包我们是要在生产环境中使用的。

2、新建一个vuex文件夹（非必须的），并创建store.js文件，文件中引入vue和vuex并使用。

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

Vue.use(Vuex)

接下来就可以愉快的玩耍了。

首先我们先做一个加减运算的demo体验一下。

1、在store.js中引入常量const

const state = {
    count: 3
}

通过export default 将Store的实例暴露出去。

export default new Vuex.Store ({
    state
})

2、新建vue模板，在模板中导入store.js文件。

import store from '@/vuex/store'

<template>
    <div>
        <h2>{{msg}}</h2>
        <hr/>
        <h3>{{$store.state.count}}</h3>
    </div>
</template>
<script>
    import store from '@/vuex/store'
    export default{
        data(){
            return{
                msg:'加减运算'
            }
        },
        store
        
    }
</script>

此时我们在页面上就可以看到

下面添加两个加减按钮，通过点击按钮来改变值。

1、在模板中添加两个button按钮。

<template>
    <div>
        <h2>{{msg}}</h2>
        <hr/>
        <h3>{{$store.state.count}}</h3>
        <button @click = "$store.commit('add')">+</button>
        <button @click = "$store.commit('reduce')">-</button>
    </div>
</template>
<script>
    import store from '@/vuex/store'
    export default{
        data(){
            return{
                msg:'加减运算'
            }
        },
        store
        
    }
</script>

2、在store.js中加入两个改变state的方法。（这里的mutations是固定写法。
）

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

然后我们就可以在页面点击按钮来实现数值的加减。