vuex入门教程

vuex

（一）vuex是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
（二）适用场景？构建是一个中大型单页应用
（三）优缺点：
优点：采用集中式存储管理应用的所有组件的状态
缺点：如果开发小型单页应用，使用 Vuex 可能是繁琐冗余
（四）其他方案：如果开发小型单页应用，一个简单的 global event bus 就足够您所需了
（五）说一下如何实现？要么说代码，要么说思路

   第一步：安装vuex
        npm install vuex --save

   第二步：创建一个store目录，并在内部创建一个index.js

     // 在index.js引入下面内容：
        import Vue from 'vue'
        import Vuex from 'vuex'
        
        Vue.use(Vuex);

      //创建存储数据的仓库state,集中管理数据
        const state={
             msg:"1509A"
        }
        
     //actions中的方法,这里面的方法都是异步操作
        const actions={
             setValue(context,res) {
                // console.log(res);
                context.commit('setData',res);
             }
        
        }

    //创建mutations，目的是能最终改变仓库中的数据，这里是同步操作
        const mutations={
            setData(state,result) {
              state.msg=result;
                
            }
        }   
    //暴露出去
    export default new Vuex.Store({
        state,
        actions,
        mutations
    
    })

第三步：在main.js中引入store中的index.js，并在Vue的实例中注册
     引入：
    import store from './store'
    注册：
    new Vue({
       ....
       store,
       ....
    })

第四步：在组件中如何获取/改变仓库中的数据

获取数据状态：要在computed计算属性中获取数据状态，例如：
   computed:{
        aa() {
            return this.$store.state.msg
        }
    }
      
  


改变数据状态：

   触发一个事件，然后再事件方法中用dispath派发到actions
    html部分：
    <button @click="go">将发送给B组件</button>
    js部分：
    methods:{
            go() {
              //this.$store.dispatch('actions方法名','要改变的值')
              this.$store.dispatch('setValue',this.info)
    
            }
        },

   通过commit提交到mutations对应方法