谈一谈Vuex

2024年4月18日 155次阅读 来源: youngwanli

Vuex是什么

官方文档说道：Vuex 是一个专为 Vue.js 运用程序开辟的状况治理模式。它采纳集中式存储治理运用的一切组件的状况，并以相应的划定规矩保证状况以一种可展望的体式格局发生变化

什么是状况治理模式

  • state，驱动运用的数据源；
  • view，以声明体式格局将 state 映射到视图；
  • actions，相应在 view 上的用户输入致使的状况变化。

《谈一谈Vuex》

当我们的运用碰到多个组件同享状况时，单向数据流的简洁性很轻易被损坏，这时刻我们就需要一个全局的状况治理来让我们的代码结构化

《谈一谈Vuex》

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
store.commit('increment')

console.log(store.state.count) // -> 1

因为 store 中的状况是相应式的，在组件中挪用 store 中的状况简朴到仅需要在盘算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation。

在Vue组件中猎取状况

// 建立一个 Counter 组件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count  //this.$store.state.count
    }
  }
}}

从 store 实例中读取状况最简朴的要领就是在盘算属性中返回某个状况

我们仍能够运用mapState函数帮我们天生盘算属性 mapState 函数返回的是一个对象

import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数能够使代码更精练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够运用 `this` 猎取部分状况，必需运用通例函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

getter

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

Vue.use(Vuex)

let state = {
    count: 0
}

let getters = {
    total: state => {
        return '$' + state.count;
    }
}

let mutations = {
    increment(_state, n){
        _state.count += n || 1;
    },
    decrement(){
        state.count -= 1;
    }
}

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

export default store

getter 经由过程属性接见

<h3>count-{{$store.getters.total}}</h3>

getter 经由过程要领接见

假如上面的要领想转变钱银标记，那就要经由过程传参体式格局来处理

let getters = {
    total: (state) => (symbol) => {
        return (symbol || '$') + state.count;
    }
}
<h3>count-{{$store.getters.total('￥')}}</h3>

mapGetters 辅佐函数

<template>
    <div>
        <h3>count-{{total('￥')}}</h3>
    </div>
</template>

<script>
    import common from '../../common/common.js'
    import {mapState, mapMutations, mapGetters} from 'vuex';
    export default {
        computed: {
            ...mapGetters([
                'total'
            ])
        }
    }
</script>

mapGetters 辅佐函数之别号

<template>
    <div>
        <h3>count-{{amount('￥')}}</h3>
    </div>
</template>

<script>
    import common from '../../common/common.js'
    import {mapState, mapMutations, mapGetters} from 'vuex';
    export default {
        computed: {
            ...mapGetters({
                amount: 'total'
            })
        }
    }
</script>

Mutations

变动 Vuex 的 store 中的状况的唯一要领是提交 mutation。Vuex 中的 mutation 异常类似于事宜，每一个 mutation 的要领都邑有一个 state 的参数在 commit 的时刻当回调形参传过来，该形参就是 store.state

let mutations = {
    increment(_state){
        _state.count += 1;
    },
}

Mutation 传参数——提交载荷（Payload）

能够向 store.commit 传入分外的参数，即 mutation 的 载荷（payload）：

let mutations = {
    increment(_state){
        _state.count += 1;
    },
}

this.$store.commit('increment', 10);

大多数情况下要传多个参数，然则 mutation 的要领最多只需两个参数，一个是 state，另一个是 payload，所以参数能够用对象的体式格局去传。

Mutation 触发之 mapMutations 篇

<input type="button" value="increment" @click="increment(10)"/>
<script type="text/javascript">
    import {mapMutations} from 'vuex';
    methods: mapMutations(['increment'])
</script>

Mutation 触发之 mapMutations 别号篇

<input type="button" value="increment" @click="add(10)"/>
<script type="text/javascript">
    import {mapMutations} from 'vuex';
    methods: mapMutations({
        add: 'increment'
    })
</script>

Mutation 触发之对象睁开运算符篇

<input type="button" value="increment" @click="increment(10)"/>
<script type="text/javascript">
    import {mapMutations} from 'vuex';
    methods: {
        ...mapMutations(['increment']),
    }
</script>

Mutation 触发之对象睁开运算符别号篇

<input type="button" value="increment" @click="add(10)"/>
<script type="text/javascript">
    import {mapMutations} from 'vuex';
    methods: {
        ...mapMutations({
            add: 'increment'
        }),
    }
</script>

Action

先援用官方文档的说法

Action 类似于 mutation，差别在于：

  • Action 提交的是 mutation，而不是直接变动状况。
  • Action 能够包括恣意异步操纵。

完成上是没问题，action 挪用 mutation，但关于异步要放到 action 的说法，个人观点是没有这个必要，在 mutation 的小结中有说到过，mutation 只做同步也不是制性的

在运用 Action 前先与 Mutation 做个小结

  • action 并非必需的，项目中完全能够不需要 action
  • 异步操纵可放 mutation 和 action，只需开辟时轻易，都没有影响
  • 关于官方说 action 异步，mutation 同步的说法只是为了能用 devtools 追踪状况变化。
  • action 中的要领和 mutation 一样，最多只需两个形参，第一个为 context，能够理解为 store，第二个为手动传的参数
  • action 用 commit() 来触发 mutation
  • view 层经由过程 store.dispath 来分发 action

简朴运用

在 action

store.js

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

Vue.use(Vuex)

let state = {
    count: 0
}

let getters = {
    total: (state) => (symbol) => {
        return (symbol || '$') + state.count;
    }
}

let mutations = {
    increment(_state, n){
        console.log(arguments)
        _state.count += n || 1;
    },
    decrement(){
        state.count -= 1;
    }
}

let actions = {
    increment(context, n){
        context.commit('increment', n)
    }
}

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

export default store

分发 action

<input type="button" value="increment" @click="$store.dispatch('increment', 5)"/>

mapActions

和 mutation 的运用要领基础一样

methods: {
    ...mapActions(['increment']),
    ...mapActions({add: 'increment'})
}

Module

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

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

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

store.state.a // -> moduleA 的状况
store.state.b // -> moduleB 的状况
    原文作者：youngwanli
    原文地址: https://segmentfault.com/a/1190000019422122
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞