vuex在vue-cli和webpack构建的项目中的简单使用

详解在vue-cli和webpack构建的脚手架中如何使用Vuex(学习笔记)

其实之前使用vue开发项目的时候，由于数据交互不多，所以一直迟迟未使用vuex，我一般采用event bus进行通信,但是随着项目需求不同，觉得有必要揭开vuex的神秘面纱了。（杀猪般的笑声，^_^）

1.首先是安装和注册

 1. 安装命令:npm install vuex --save-dev
 2. 安装完成后需要在main.js中引入，如下所示：
 import Vuex from 'vuex'
 import store from './vuex/store'
 Vue.use(Vuex)
 new Vue({
    el: '#app',
    router,
    store,
    template: '<App/>',
    components: { App }
})

2.准备工作就绪，就开始研究怎么具体使用了，首先抛出一个错误，啊不对，是抛出一个问题，什么是vuex?

官方文档的解释是这样滴：

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

这两句话中有几个关键词：状态管理 、 集中式 、可预测的方式发生变化

抓住这些关键词来分析，我们可以简单理解成：vuex就是将组件中公用的状态全部抽出来，集中去管理，无论你是获取状态还是更改状态，都通过vuex来进行。

3.接着，我们正式开始在项目中使用vuex

• 在src下面新建一个vuex目录，并且新建一个store.js的文件(用来管理所有状态)

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        age: '18' //存储了一个公共状态age
    }，
    mutations : {
        showAge(state, msg){
            state.age= msg;
        }
    }
}) 
export default store

现在我们想要在组件中拿到这个状态，并且渲染到页面中，首先你得有个组件，如下：

components1.vue（子组件）

基本结构得有，这只是一个简单的获取状态
<template>
    <div class="components1">
        <div>
            <input type="text" v-model="msg" />
            <input type="button" v-on:click="setAge" value="点我" />
        </div>
    </div>
</template>

<script>
    export default {
        name: 'components1',
        data(){
            return {
                msg : ''
            }
        },
        methods : {
            setName(){
                this.$store.commit( 'showAge', this.msg ); //在组件1中修改组件3的状态
            }
        }
    }
</script>

<style scoped lang="scss"></style>

components3..vue（子组件）

<template>
    <div>
        <h3>{{mAge}}</h3>
    </div>
</template>
<script>
    export default {
        name : "components3",
        computed : { //一般会在组件的计算属性（computed）获取state的数据（因为，计算属性会监控数据变化，一旦发生改变就会响应）
            myAge (){
                return this.$store.state.age;
            }
        }
    }
</script>

components2.vue（现在我们开始组件嵌套，components1和components3是components2的子组件）

<template>
  <div id="app">
    <components1></components1> //我们可以在组件2中渲染出组件1的值，并且在改变state中的age时，组件2中的组件1也会更新。
    <components3></components3>
  </div>
</template>

<script>
import components1 from './components/components1';
import components3 from './components/components3';
export default {
  name: 'app',
  components : {
    components1,
    components3
  }
}
</script>

说真的 ，我已经被绕晕了。。。。。。。自己觉得明白，但是表达不出来。。。尴尬

上述内容参考：
https://www.cnblogs.com/ghostwu/p/7521097.html
https://www.cnblogs.com/first-time/p/6815036.html