vuex

1结构

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

2使用

1安装
npm install vuex --save

2新建store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0,
    total: 0
  },
  getters: {
    isEven(state) {
      return state.count % 2 === 0
    }
  },
  mutations: {
    increase(state, n) {
      state.count += n
    }
  },
   actions: {//通常是在actions内执行异步操作，同步事件可直接在mutations内执行更方便
    increase({ commit }) {
      commit('increase')
    }
  }，
  modules: {
    //
  }
})

export default store

3在根实例中注册 store 选项
在main.js:

import store from 'xxx/store/index'

new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。

3核心概念

state

一、可以从this.$store.state.xxx拿到state数据

<p>{{this.$store.state.count}}</p>
...
console.log(this.$store.state.count)

二、引入mapState辅助函数，可以接收一个对象或数组，写在computed里面
(1)接收数组

import { mapState } from 'vuex'

export default {
  // ...
  computed: {
      ...mapState(['count','total']) //直接使用count total
  }
}

(2)接收对象

import { mapState } from 'vuex'

export default {
  // ...
  computed: {
     ...mapState({
        count: state => state.count,
        total: state => state.total
    })
  }
}

getters---store的计算属性

一、可以从this.$store.getters.xxx拿到state数据

this.xxx = this.$store.getters.xxx

二、引入mapGetters辅助函数，可以接收一个对象或数组，写在computed里面
(1)接收数组

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
      ...mapGetters(['isEven']) //可以直接使用{{isEven}}或this.isEven
  }
}

(2)接收对象

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
    ...mapGetters({
      //把 `this. myIsEven ` 映射为 `this.$store.getters. isEven`
      myIsEven: 'isEven'
    })
  }
}

mutations---更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

一：this.$store.commit()

<h1 @click="add(1)">{{count}}</h1>
....
export default {
  // ...
  methods: {
    add(num) {
      this.$store.commit('increase', num) //第一个参数是mutations中方法，第二个参数是传递给该方法的参数
    },
  }
}

对象风格的提交方式

this.$store.commit({
  type: 'increase',
  amount: 10
})

当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数，因此 handler 保持不变：

mutations: {
  increase (state, payload) {
    state.count += payload.amount
  }
}

使用常量替代 Mutation 事件类型

新建store/type.js：

export const SOME_MUTATION = 'SOME_MUTATION'

在store/index.js：

import Vuex from 'vuex'
import { SOME_MUTATION } from 'xx/type.js'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})

二、引入辅助函数mapMutations,写在methods里面

<h1 @click="add(1)">{{count}}</h1>
....
export default {
  // ...
  methods: {
    ...mapMutations({
       /// 将 `this. add()` 映射为 `this.$store.commit('increase')`
       add: 'increase'
    }),
  }
}

actions---提交 mutation，可以包含任意异步操作

一、this.$store.dispatch()提交一个动作

...
this.$store.dispatch('increase') //increase是actions里的一个方法，通过increase去提交mutation

通常是在action里执行异步操作

actions: {
  increaseAsync ({ commit }) {
    setTimeout(() => {
      commit('increase')
    }, 1000)
  }
}

二、引入辅助函数mapActions,写在methods里面

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions({
      //// 将 `this.add()` 映射为 `this.$store.dispatch('increase')`
      add: 'increase'
    }),
  }
}

modules---将store分割成模块，每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  .....
  modules: {
    a: moduleA,
    b: moduleB
  }
})

//this.$store.state.a  -> moduleA 的状态
//this.$store.state.b -> moduleB 的状态

模块的局部状态

const moduleA = {
  state: { count: 0 },
  mutations: {
    increment (state) {
      // 这里的 `state` 对象是模块的局部状态
      state.count++
    }
  },

  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}

对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState:

const moduleA = {
  // ...
  actions: {
    incrementIfOddOnRootSum ({ state, commit, rootState }) {
      if ((state.count + rootState.count) % 2 === 1) {
        commit('increment')
      }
    }
  }
}

对于模块内部的 getter，根节点状态会作为第三个参数暴露出来：

const moduleA = {
  // ...
  getters: {
    sumWithRootCount (state, getters, rootState) {
      return state.count + rootState.count
    }
  }
}

命名空间---namespaced: true

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的,可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。设置后使用辅助函数要把第一个参数设置为对应的模块名。

const store = new Vuex.Store({
  modules: {
    home: {
      namespaced: true,

      // 模块内容（module assets）
      state: { ... }, // ->this.$store.state.home.count和 ...mapState('home',['count']),
      getters: {
        isAdmin () { ... } // -> this.$store.getters['home/isAdmin']和...mapGetters({isAdmin: 'home/isAdmin' }),
      },
      actions: {
        login () { ... } // -> this.$store.dispatch('home/login')
      },
      mutations: {
        login () { ... } // -> this.$store.commit('home/login')
      },
    }
  }
})
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,233评论 4赞 360
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,013评论 1赞 291
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,030评论 0赞 241
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,827评论 0赞 204
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,221评论 3赞 286
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,542评论 1赞 216
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,814评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,513评论 0赞 198
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,225评论 1赞 241
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2赞 244
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1赞 258
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,342评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 32,986评论 3赞 235
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0赞 194
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2赞 271
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2赞 266