vueX的使用

使用vueX的目的与优点：

       vueX是一个公共状态的管理仓库，便于对多个组件文件都需要使用的公共数据状态进行统一管理；

vueX使用方法:　

       1.安装vueX插件;创建一个编写vueX的store.js文件，在文件中引入vue和vueX，vue.used(vueX);将store.js的文件引入到主文件main.js中，并挂在入vue根实例中；

       2.暴露vueX实例：

          export default new Vuex.Store（{

          // 用来存放公共的数据状态变量

          state:{

             count:0,

             isShow:true

           },

           //实时监测state值的变化（最新状态）,功能类似于computed的实时监测

           getters:{

               getCount(state){  //承载变化的count值；

                   return state.count

               }

            }，

            //修改state里的变量值,只能同步的修改state里的变量值

            mutations:{

                 addCount(state,num){  //必须传入state作为函数的第一个参数，第二个参数是同过commit("addCount",1)调用时传入的参数；

                     state.count=state.count+num;

                  }

             },

             //异步的修改state中的数据变量

                 actions:{

                     getAddCount(context,num){   //context与store实例具有相同的属性和方法；

                          context.commit("addCount",num);

                     }

                 }

        }）   

     3.在组件中获取、调用vueX中的状态变量和方法：

        //在模板中使用也要添加this,这点和在模板中使用date中的数据不用带this不一样

        //获取state中的数据变量；

        <div>{{this.$store.state.count}}</div>

        //获取getters中的数据变量：

        <div>{{this.$store.getters.getCount}}</div>

 

        //调用mutations中的函数修改state中的数据变量：

        this.$store.commit("addCount",1);

        //调用actions中的函数异步修改state中的数据变量：

        this.$store.dispatch("getAddCount",1);

     

     4.vueX的简短的调用方式：辅助函数mapState、mapGetters、mapActions

import {mapState、mapGetters、mapActions} from 'vueX';

 

       computed：{

           ...mapState({

               count1:state=>state.count

           }),

           ...mapGetters([

                "getCount"

           ])

        }

        <div>{{count1}}</div>

        <div>{{getCount}}</div>

vueX与localStorage的关系：

       当浏览器刷新的时候，vueX中的数据会恢复到初始的状态，而localStorage 的值不会因刷新而改变；

 

本篇博客整理自：https://www.cnblogs.com/mica/p/10757965.html