vuex 的使用

 Vuex 可以帮助我们管理共享状态，各个页面或多个组建之间进行复杂数据之间的传值很困难时，我们可以这样想，我们可以把公共的数据放到一个公共的存储空间去存储，如果我们改变了这个公共空间的数据，其他页面或组件就能感知到，这就是vuex

如图，vuex虚线部分就是所说的公共空间的存储区域(可以把这个区域理解成一个仓库)，这个仓库由几部分组成：state(所有的公共数据都存放在state中)，如果一个组件想用公共数据，就可以直接调用state。如果想改变state中的公用数据，不能组件直接改变公用数据，必须组件先调用Action(通过dispatch方法调用)，Action(通过commit方法调用)再接着调用Mutations，Mutations放着的是对state的修改。

1.安装vuex

npm i vuex --save

2.在src文件夹下创建一个store文件夹，在store文件中创建index.js文件

3.在index.js中

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export defaule new Vuex.Store({

     state{

               data:'存放的公共数据'

     }

})

4.在main.js中 引入使用

import store from './store/index.js'

         new Vue({

             el: '#app',

             router,

            store,

            components: { App },

           template: '<App/>'

       })

5.在要使用公共数据的页面中 {{this.$store.state.data}} 可以使用数据

6.如需要改变数据：

在需要改变数据的组件中

绑定事件触发事件函数

            <div @click="handelChangeCity(传入要改变成的数据)"> 改变数据</div>

            <script>

                  export default{

                        methods:{

                               handelChangeCity(city){

                                         this.$store.dispatch('changeCity',city)//派发一个名字叫changeCity的action，传递参数为city

                                  }

                         }

                   }

            </script>

         在index.js中

        

export default new Vuex.Store({

   state:{

       data:'存放的公共数据'

    },

   actions:{

     changeCity(ctx,city){

          ctx.commit('changeCity',city) //执行commit方法调用mutations

      }

  },

  mutations:{

     changeCity(state,city){

         state.city=city

     }

   }

})