vuex状态管理器简单理解

      使用过vue的人都知道vue实例有一个选项这么个东西,什么是选项呢.比如一个vue实例里的el,data,computed,mounted,methods等等.所以vuex用一个叫store的实例.他可以当做vue实例的一个选项去使用,和vue-router一样使用前,调用Vue.use(vue-router) Vue.use(Vuex).

如果在vue实例里选项的键值相同的话可以使用简写

vuex状态管理器简单理解

store实例与vue实例可以对应的去理解

store                                       vm

state                                       data

mutation                                methods

getters                                   computed

一旦在跟实例里使用store选项,那么下边所有子组件都可以使用store里的state,getters.

而store里的Actions和mutations是对store实例状态的处理,其中Actions不会直接去改变状态state,而是去分发,调度,提交一个事件类型,状态改变只发生在mutations里

        actions和mutations里的事件可以不使用[] 可以直接写USER_SINGIN,其中Actions中事件的第一个参数是content,它具有和store相同的属性和方法但不是store实例本身,后面的参数就是用户操作时事件传递的参数,像{ commit ,dispatch }写法是一种简写的方式,意思是从context获取commit和dispatch两个方法,如果不这样写可以用context.dispatch或者context.commit方法,其中dispatch和commit在分发事件上有一定的区别.mutations时间里的第一个参数是state,它可以访问store实例里的所有state并且可以改变他们从而使页面UI发生改变.

      getters更倾向于写一些过滤store里state的方法,

     在子组件里可以通过this.$store 来获取store下边的state和getters对象里的方法

    当然store实例选项有对应的辅助函数import { mapActions ,mapState ,mapMutations} from 'vuex';

  在子组件里你可以这样使用

第一次写这种东西,不知道写的乱不乱,如有高人指点,感激不尽

可以详谈----微信:::18510954161