vuex用法

vuex

      vuex解决不同组件的数据共享，数据持久化。

      1.安装：

        npm install vuex --save

      2.在main.js导入包

        import Vuex from 'vuex'

      3.在main.js注册包

        Vue.use(vuex)

      4.在main.js里面new Vuex.store实例，得到一个仓储对象。

        var store = new Vuex.Store({

          state:{

            //state是组件中的data,专门用来存储数据的

            count: 0 //全局有一个0数据

            //如果在组件中想要访问store中的数据，只能通过this.$store.state.***来访问

            //例如访问上面0:

          },

          mutations: {//mutations是方法，主要用于·

            //如果要操作store中的state值，只能通过调用mutations提供的方法，才能操作对用的数据

            //不推荐直接操作state中的数据，因为万一导致数据紊乱，不能快速定位到错误的原因，因为，每个组件都可能有操作数据的方法；

            increment(state){  //increment是方法名，第一个参数state是规定死的。

              state.count++

              }

              //注意：如果组件想要调用mutations中的方法，只能使用this.$store.commit('方法名')

              //这种调用mutations方法的格式，和this.$emit('父组件中方法名')

          }

        }) 

      5.在main.js里面挂载store(和挂载路由一样)

        const vm = new Vue({

          el: '#app',

          render: c => c(app),

          router //挂载路由

          store //将vuex创建的store 挂载到VM实例上。

          //只要挂载到vm上，任何组件都能使用store来存取数据

        })

        vuex的使用：

        1、src目录下面新建一个vuex的文件夹

        2、vuex 文件夹里面新建一个store.js

        3、安装vuex 

          cnpm install vuex --save

        4、在刚才创建的store.js引入vue  引入vuex 并且use vuex

          import Vue from 'vue'

          import Vuex from 'vuex'

          Vue.use(Vuex)

        5、定义数据

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

            var state={

                count:1

            }

        6、定义方法   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';

          2、注册

            export default{

              data(){

                  return {             

                    msg:'我是一个home组件',

                value1: null,

                  }

              },

              store,  //注册

              methods:{

                  incCount(){

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

                  }

              }

                }

          3、获取state里面的数据 

            this.$store.state.数据名

          4、触发 mutations 改变 state里面的数据

            this.$store.commit('incCount');