Vuex状态管理

Vuex 是一个专为 Vue.js 设计的状态管理模式


vuex解决了组件之间同一状态的共享问题。当咱们的应用遇到多个组件共享状态时，会须要：

多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会很是繁琐，而且对于兄弟组件间的状态传递无能为力。这须要你去学习下，vue编码中多个组件之间的通信的作法。
来自不一样组件的行为须要变动同一状态。咱们常常会采用父子组件直接引用或者经过事件来变动和同步状态的多份拷贝。

以上的这些模式很是脆弱，一般会致使没法维护的代码。来自官网的一句话：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

它采用集中式存储管理应用的全部组件的状态。这里的关键在于集中式存储管理。这意味着原本须要共享状态的更新是须要组件之间通信的，而如今有了vuex，就组件就都和store通信了。问题就天然解决了。

这就是为何官网再次会提到Vuex构建大型应用的价值。若是您不打算开发大型单页应用，使用 Vuex 多是繁琐冗余的。确实是如此——若是您的应用够简单，您最好不要使用 Vuex。


Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式


    1.vuex解决了组件之间同一状态的共享问题  （解决了不一样组件之间的数据共享）

    2.组件里面数据的持久化。                



小项目不部建议用vuex   

vuex的使用：
    一、src目录下面新建一个vuex的文件夹
    二、vuex 文件夹里面新建一个store.js
    三、安装vuex  
        cnpm install vuex --save

    四、在刚才建立的store.js引入vue  引入vuex 而且use vuex

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

        Vue.use(Vuex)

        

    五、定义数据

            /*1.state在vuex中用于存储数据*/
            var state={

                count:1
            }
   
    六、定义方法     mutations里面放的是方法，方法主要用于改变state里面的数据

        var mutations={

            incCount(){

            ++state.count;
            }
        }
    暴露

        const store = new Vuex.Store({
            state,
            mutations
        })
        
        export default store;

组建里面使用vuex：


        1.引入 store

             import store from '../vuex/store.js';


        二、注册

             export default{
                data(){
                    return {               
                       msg:'我是一个home组件',
                    value1: null,
                     
                    }
                },
                store,
                methods:{
                    incCount(){
                      
                    this.$store.commit('incCount');   /*触发 state里面的数据*/
                    }

                }
                }
        三、获取state里面的数据  

            this.$store.state.数据



        四、触发 mutations 改变 state里面的数据
            
            this.$store.commit('incCount');

vuex/store.js

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

Vue.use(Vuex);


/*1.state在vuex中用于存储数据*/
var state={

    count:1
}

/*2.mutations里面放的是方法，方法主要用于改变state里面的数据
*/
var mutations={

    incCount(){

        ++state.count;
    }
}

//vuex  实例化 Vuex.store
const store = new Vuex.Store({
    state,
    mutations
})
export default store;

<template>
    <!-- 全部的内容要被根节点包含起来 -->
    <div id="home">    
       我是首页组件  -- {{this.$store.state.count}}


        <br>

        <button @click="incCount()">增长数量+</button>
        
       
    </div>
</template>


<script>

    //1. 引入store   建议store的名字不要变

    import store from '../vuex/store.js';

    //2.注册
    export default{
        data(){
            return {               
               msg:'我是一个home组件',
                value1: null,
             
            }
        },
        store,
        methods:{
            incCount(){
                //改变vuex store里面的数据

                this.$store.commit('incCount');   /*触发 mutations 改变 state里面的数据*/
            }

        }
    }

</script>

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