vuex 基本使用总结

古城微笑少年丶 2022-05-27 00:25 256阅读 0赞

## 使用 ##

1.  在 Vue 的单页面应用中使用，需要使用Vue.use(Vuex)调用插件。
2.  使用非常简单，只需要将其注入到Vue根实例中。

mport Vuex from 'vuex'
    Vue.use(Vuex)
    const store = new Vuex.Store({
      state: {
        count: 0
      },
    getter: {
        doneTodos: (state, getters) => {
          return state.todos.filter(todo => todo.done)
        }
      },
      mutations: {
        increment (state, payload) {
          state.count++
        }
      },
    actions: {
      addCount(context) {
        // 可以包含异步操作
        // context 是一个与 store 实例具有相同方法和属性的 context 对象
      }
    }
    })
    // 注入到根实例
    new Vue({
      el: '#app',
      store,
      template: '<App/>',
      components: { App }
    })

然后改变状态：

this.$store.commit('increment')

> Vuex 主要有四部分：

1.  state：包含了store中存储的各个状态。
2.  getter: 类似于 Vue 中的计算属性，根据其他 getter 或 state 计算返回值。
3.  mutation: 一组方法，是改变store中状态的执行者。
4.  action: 一组方法，其中可以含有异步操作。

## state 使用 ##

Vuex 使用 state来存储应用中需要共享的状态。为了能让 Vue 组件在 state更改后也随着更改，需要基于state创建计算属性。

const Num = {
      template: `<div>{
       { num }}</div>`,
      computed: {
        num () {
          return this.$store.state.num 
        }
      }
    }

## getters 使用 ##

类似于 Vue 中的 计算属性，可以在所以来的其他 state或者 getter改变后自动改变。每个getter方法接受 state和其他getters作为前两个参数。

getters: {
        doneTodos: (state, getters) => {
          return state.todos.filter(todo => todo.done)
        }
      }

## mutations 使用 ##

前面两个都是状态值本身，mutations才是改变状态的执行者。mutations用于`同步地更改状态`

mutations: {
      increment (state, n) {
        state.count += n
      }
    }

其中，第一个参数是state，后面的其他参数是发起mutation时传入的参数。

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

commit方法的第一个参数是要发起的mutation名称，后面的参数均当做额外数据传入mutation定义的方法中。

> 规范的发起mutation的方式如下：

store.commit({ type: 'increment', amount: 10 //这是额外的参数 })

额外的参数会封装进一个对象，作为第二个参数传入mutation定义的方法中。

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

## actions 使用 ##

想要`异步地更改状态`,需要使用action。action并不直接改变state，而是发起mutation.

actions: {
      incrementAsync ({ commit }) {
        setTimeout(() => { commit('increment') }, 1000) } }

> 发起action的方法形式和发起mutation一样，只是换了个名字dispatch

// 以对象形式分发
    store.dispatch({
      type: 'incrementAsync',
      amount: 10
    })

> ## action处理异步的正确使用方式 ##

想要使用action处理异步工作很简单，只需要将异步操作放到action中执行（如上面代码中的setTimeout）。

> 要想在异步操作完成后继续进行相应的流程操作，有两种方式:  
> 1. action返回一个 promise  
> \- 而dispatch方法的本质也就是返回相应的action的执行结果。所以dispatch也返回一个promise  
> `JavaScript store.dispatch('actionA').then(() => { // ... })`  
> 2. 利用async/await。代码更加简洁

// 假设 getData() 和 getOtherData() 返回的是 Promise
    
    actions: {
      async actionA ({ commit }) {
        commit('gotData', await getData())
      },
      async actionB ({ dispatch, commit }) {
        await dispatch('actionA') // 等待 actionA 完成
        commit('gotOtherData', await getOtherData())
      }
    }

## 各个功能与 Vue 组件结合(重点) ##

将state和getter结合进组件需要使用`计算属性`:

computed: {
        count () {
          return this.$store.state.count 
          // 或者 return this.$store.getter.count2
        }
      }

将mutation和action结合进组件需要在 `methods`中调用this.store.commit()或者this.store.commit():

methods: {
        changeDate () {
            this.$store.commit('change');
        },
        changeDateAsync () {
            this.$store.commit('changeAsync');
        }
    }

## vuex 的扩展功能 ##

为了简便起见，Vuex 提供了四个方法用来方便的将这些功能结合进组件。  
1. mapState  
2. mapGetters  
3. mapMutations  
4. mapActions

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
    
    // ....
    computed: {
      localComputed () { /* ... */ },
      ...mapState({
        // 为了能够使用 `this` 获取局部状态，必须使用常规函数
        count(state) {
          return state.count + this.localCount
        }
      }),
      ...mapGetters({
        getterCount(state, getters) {
          return state.count + this.localCount
        }
      })
    }
    methods: {
      ...mapMutations({
           add: 'increment' // 将 `this.add()` 映射为`this.$store.commit('increment')`
        }),
      ...mapActions({
          add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
        })
    }

> 如果结合进组件之后不想改变名字，可以直接使用`数组`的方式(推荐使用)

methods: {
        ...mapActions([
          'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
    
          // `mapActions` 也支持载荷：
          'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
        ]),
    }

## module – 模块化 ##

可以将应用的`store`分割为小模块，每个模块也都拥有所有的东西:`state`, `getters`, `mutations`, `actions`

> 首先创建子模块的文件：

// initial state
    const state = {
      added: [],
      checkoutStatus: null
    }
    // getters
    const getters = {
      checkoutStatus: state => state.checkoutStatus
    }
    // actions
    const actions = {
      checkout ({ commit, state }, products) {
      }
    }
    // mutations
    const mutations = {
      mutation1 (state, { id }) {
      }
    }
    export default {
      state,
      getters,
      actions,
      mutations
    }

> 然后在总模块中引入：

import Vuex from 'vuex'
    import products from './modules/products' //引入子模块
    
    Vue.use(Vuex)
    export default new Vuex.Store({
      modules: {
        products   // 添加进模块中
      }
    })