Vuex的使用

vuex的五大核心
  1. state：vuex的基本数据，用来存储变量
  2. geeter：通过 geeter 获取 state 内的值（可以认为是 store 的计算属性）
  3. mutation：更新 store 中数据的唯一方法是 mutation，必须是同步的
  4. action： action提交的是 mutation 的方法，而不是直接变更状态。action可以包含任意异步操作。
  5. module：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
    注意：store 存储在内存中，页面刷新会重置 store 导致之前存储的数据丢失。解决方法见 https://www.jianshu.com/p/36f2b138048f
准备

npm install vuex --save 安装vuex
在根目录中创建store.js并导入 Vue 和 Vuex，创建一个Vuex的实例 store 最后导出 。

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

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {},
    getters:{}, 
    mutations:{},
    actions:{}
})

export default store

在 main.js 内导入 store.js 并注入到vue实例中，这样我们可以在 component 页面内使用this.$store获取到 store 内的属性和方法

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

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

1.state

在 store 内写入一个存有多个状态的 state

const store = new Vuex.Store({
    state: {
        name: '一条单身狗',
        age: '18',
        job: 'programmer'
    }
})

在 vue 组件页面中通过 computed 计算属性 来展示数据。

export default {
  data(){
    return{
      localCount:'我是'
    }
  },
  computed: {
    myname() {
      return this.localCount + this.$store.state.name
    }
  },
   created() {
    console.log(this.myname) //我是一条单身狗
  }
}
mapState 辅助函数

但是当需要展示的数据有多个时，为了减少声明多个计算属性带来的冗余我们可以使用 mapState 辅助函数。下面以获取 storte 中的 name 为例：

import { mapState } from 'vuex' //导入 mapState 
export default {
  data(){
    return{
      localCount:'我是'
    }
  },
  computed: mapState({
      computedFn1: state => state.name,
      computedFn2: 'name', // 传字符串参数 'name' 等同于 computedFn1
      computedFn3 (state) { // 如果需要加入局部状态参与计算还是需要使用常规函数
      return this.localCount + state.name
    }
  }),
  created() {
      console.log(this.computedFn1 == this.computedFn2 == this.computedFn3) // true
  },
}

当不需要加入局部状态参与计算，只是需要展示 stort 内的状态时我们也可以给 mapState 传一个字符串数组

computed: mapState(['name']) // console.log(this.name)  一条单身狗

使用对象展开运算符我们可以将 mapState 和局部计算属性混合使用（个人建议写法）

computed: {
  someComputed () {},
  ...mapState([]) // 或者 ...mapState({ newName: 'name' }) 给注入后的 name 重新命名
}

2.getter

有时我们需要从 state 中派生出一些状态，如果有多个页面都需要使用为了减少冗余 store 提供了一个针对 state 的计算属性 getter,它和 computed 一样会将计算结果存储在内存中，当 state 更新时会重新计算。

const store = new Vuex.Store({
    state: {
        name: '咸鱼',
        say: '我不是'
    },
    getters: {
        getName(state) { //getter 的第一个参数必须为 state
            return '一条' + state.name
        },
        getIntroduce: (state, getters) => { // 第二个参数不做限制，可以传入其他 getter 参与计算
            return state.say + getters.getName
        }
    }
})

在组件内展示

computed: {
    showGettersIntroduce(){
      return this.$store.getters.getIntroduce // 我不是一条咸鱼
    }
  }
mapGetters 辅助函数

和 state 一样使用 mapGetters 辅助函数将 store 中的 getters 注入到 computed 中

import { mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    showGettersIntroduce(){
      return this.$store.getters.getIntroduce
    },
    ...mapGetters(['getIntroduce','getName']),
    ...mapGetters({newName : 'getName'})
  },
  created() {
    console.log(this.getIntroduce); // 我不是一条咸鱼
    console.log(this.newName); // 一条咸鱼
  }
};

3.mutation

我们明明使用 (this.$store.state.name = ' *** ') 的方式可以修改 store 中的状态，为什么vuex 官方说更改 store 中的状态的唯一方法是 提交 mutation ?
因为只有通过 mutation 更新 store 的操作会被vuex记录，可以在 vue-devtools 查看 mutation 执行记录，追踪数据的变化。
mutation 由一个 string 类型的 type ,和一个回调函数组成。回调函数可传入两个参数，第一个默认为 state，第二个参数为 payload。下面我们创建一个 type 为 modifyName 的 mutation 来修改 state 内的 name。

const store = new Vuex.Store({
    state: {
        name: '咸鱼',
        say: '我不是'
    },
    mutations:{ 
        modifyName(state,newName){ 
            state.name = newName
        }
    }
})

调用 mutation 需要通过 store.commit() 方法,即提交 mutation。第一个参数指定 mutation 的 type,第二个参数为 payload

// 三种提交 mutation 的方式
this.$store.commit('modifyName','情圣')
this.$store.commit({type:'modifyName',newName:'情圣'})
this.$store.commit('modifyName',{newName:'情圣'}) // 推荐

在 devtools 可以看到生成了一条新的记录，name 更新为 '情圣'


image.png
mapMutations 辅助函数

mapMutations 和 mapStates 、 mapGetters不同，mapMutations 映射到页面的 methods 中。

import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations([
      'modifyName', // 将 `this.modifyName()` 映射为 `this.$store.commit('modifyName')`

      // `mapMutations` 也支持载荷：
      'modifyName' // 将 `this.modifyName('情圣')` 映射为 `this.$store.commit('modifyName', '情圣')`
    ]),
    ...mapMutations({
      newName: 'modifyName' // 将 `this.newName()` 映射为 `this.$store.commit('modifyName')`
    })
  }
}

对于为什么 mutation 必须是同步？
在 mutation 中混合异步调用会导致你的程序很难调试。例如，当你调用了两个包含异步回调的 mutation 来改变状态，你怎么知道什么时候回调和哪个先回调呢？这就是为什么我们要区分这两个概念。在 Vuex 中，mutation 都是同步事务
答案：防止多个异步 mutation 执行影响 devtools 追踪记录，所以异步事务在 action 内处理。可以在 store 中开启严格模式，预防在多人开发中 mutation 内使用了异步操作。详见 https://vuex.vuejs.org/zh/guide/strict.html

4.action

action 提交的是 mutation,和 mutation 不同的是 action 内可以尽情的使用异步操作。

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

const store = new Vuex.Store({
    strict: true,
    state: {
        name: '咸鱼'
    },
    mutations: {
        modifyName(state, newName) {
            state.name = newName
        }
    },
    actions: {
        modifyName(context,newName) {
            context.commit('modifyName',newName)
        },
        modifyName2({ commit },newName) { // 官网上推荐参数解构的写法
            commit('modifyName',newName)
        },
    }
})

我们要区分 action 在页面内使用 store.dispatch 调用，mutation 通过 store.commit 执行

this.$store.dispatch ('modifyName','情圣')
this.$store.dispatch ({type:'modifyName',newName:'情圣'})
this.$store.dispatch ('modifyName',{newName:'情圣'}) // 推荐
mapActions 辅助函数
import { mapActions } from 'vuex'

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

      // `mapActions` 也支持载荷：
      'modifyName2' // 将 `this.modifyName2(newName)` 映射为 `this.$store.dispatch('modifyName2', newName)`
    ]),
    ...mapActions({
      modify: 'modifyName' // 将 `this.modify()` 映射为 `this.$store.dispatch('modifyName')`
    })
  }
}

上面只是介绍 action 的写法以及在页面内的用法，在生产中的使用一定是包含异步操作的，下面是官网的说明。

store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise。
我们在 action 内使用 Promise 包裹异步操作就可以了

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  },
actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
}

store.dispatch 仍旧返回 Promise

this.$store.dispatch('actionA').then(() => {
  // ...do someth
})

【↓↓有收获请点个赞哦~~】

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