女人和她衣橱的故事，阐述VUEX

VUEX 是一种程序模式，来统一管理程序状态的。
    诙谐点说： VUEX  就是一个女人对生活的一种态度，是一种管理、收纳自己用品的一种归置模式。

你喜欢把花放在电视机旁，她喜欢把花放到冰箱上，还有女人喜欢把衣服放到床上，等等等，都可以，这是一种归置的思想,电视剧、冰箱、床  这三个都是 容器，能容纳你放置的这些东西。

在VUE 里面也把这些个概念虚拟出来一个名称  叫做  Store,英文名字  Store 就是 仓储、容器的意思
    那VUE 是通过什么来 虚拟这个 Store 的呢？通过new Vuex.Store({})来虚拟Store
VUEX 把虚拟的模式，为了具体化成为规定的仓库，就是 通过这个代码，他告诉这个女人，我要给你做一个容器了。

接下来，给这个女人做的容器，我给他起个名字 叫衣服厨子，  const store【衣服厨】= new Vuex.Store
    女人为了和她的衣厨进行日常的生活，会和这个衣服厨进行打交道。
    和衣橱生活的日中中包含   {    
        衣橱储物槽（state）,   
        向衣橱储物槽放置东西这个行为（mutation） ，
        以及从衣物来源行为（Action）      
    }

这个地方写代码的话可以是
    
    state.js ( 衣服储物槽文件 )
        const state[储物槽] = {
         内衣槽,
         裤子槽,
         外套槽,
    }

mutaion.js ( 向衣橱储物槽归置行为)
    const mutations[行为集合] = {
         放到内衣槽行为 : function(state, payload ){
              state.内衣槽 = payload
         },
         放到裤子槽行为 : function(state, payload ){
              state.内衣槽 = payload
         }
    }

这个 state 就是衣橱储物槽，目前所有的情况
    payload 载荷，即为咱们要往具体的储物槽里面放置什么物品
    这时候我们有个衣物来源行为归属

actions.js (女人填充填充衣橱行为)

const actions = { 
     买裤子({state, commit}, payload(此处为款式) ) {
          axios.post('去商场买', {  款式 }).then( res => {
               //买回来后干啥
               commit (' 放到裤子槽行为', XX款式裤子)
          })
     },
     洗内衣({state, commit}, payload(此处为款式) ) {
          axios.post('去商场买', {  款式  }).then( res => {
               //洗完干啥
               commit (' 放到内衣槽行为', XX款式内衣)
              })
     },
    }

女人和衣橱的日常模式已经设定好了，则这个模式就是 VUEX 状态管理模式
    (action.js) -> store.dispatch('买裤子行为', 牛仔裤);  -> (mutation)  ->  commit (' 放到裤子槽行为', 牛仔裤) -> (state)  state.牛仔槽 = payload(牛仔裤)

这个女人，出去了一趟，买了条牛仔裤，到和他的衣橱交互后，结果是，这个衣橱的槽里面，多了条牛仔裤
这个槽里面多了条牛仔裤，无论是这个女人，还是她的闺蜜，如果来他家打开这个储物槽，都能看到
这个 “能看到” 这个瞬间，就是

computed: {
         观察裤子槽 () {
          return this.$store.state.count  （出现了牛仔裤）
        }
      }

BraveDu

女人和她衣橱的故事，阐述VUEX

您可以选择一种方式赞助本站

发表评论