vuex 使用

store(仓库) 结构

const store = new Vuex.Store({
  state: {
    messages: []
  },
  getters: {
    unreadFrom: (state) => state.messages
      .filter((message) => !message.read)
      .map((message) => message.user.name)
  },
  mutations: {
    addMessages(state, newMessages) {
      state.messages.push(...newMessages);
    }
  },
  actions: {
    getMessages(context) {
      fetch('/api/new-messages')
        .then((res) => res.json())
        .then((data) => {
          if(data.messages.length){
            context.commit('addMessages', data.messages)
           }
        });
    }
  }
});

---

核心介绍

State

• 作用：state 表示数据在 vuex 中的存储状态。由于 vuex 使用单一状态树（每个应用只有一个 store 实例），所以 state 作为一个唯一数据源 (SSOT) 而存在。
• 调用方式(推荐放在计算属性中)

import { store } from 'vuex'

const base = new Vue({
  store,
  computed: {
    messages(){
      return this.$store.state.messages
    },
  }
}) 

• 辅助函数： mapState()

import { mapState } from 'vuex'

const auxiliary = new Vue({
  store,
  computed: mapState({
    messages: (state) => state.messages
  })
})

如果只是获取 state 上的一个属性作为计算属性，也可以写成：

computed: mapState({
  messages: 'messages'  
})

如果计算属性键与属性名称相同，可写成：

computed: mapState(['messages'])

Getter

• 作用：将计算属性抽离组件，做到代码复用（可以认为 getter 是 store 的计算属性）。
• 调用方式：

import { store } from 'vuex'

const base = new Vue({
  store,
  computed: {
    unreadForm(){
      return this.$store.getters.unreadForm;
    },
  }
}) 

• 辅助函数：mapGetter()
  数组调用写法

import { mapGetter } from 'vuex'

const auxiliary = new Vue({
  store,
  computed: mapGetter (['unreadForm'])
})

对象调用写法

import { mapGetter } from 'vuex'

const auxiliary = new Vue({
  store,
  computed: mapGetter ({
    unreadMessagesForm: 'unreadForm'
  })
})

Mutation

• 作用：对 state 进行同步变更，通过调用 store.commit() 并传入 mutation 名称的方式来表达。
• 调用方式( commit 的第一个参数为 mutation 的名称，第二个是可选参数 payload)

import { store } from 'vuex'

const base = new Vue({
  store,
  methods: {
    handleSubmit() {
      this.$store.commit('addMessages', [])
    }
  }
}) 

也可以将两个参数，组合成一个 payload 对象

this.$store.commit({
  type: 'addMessages',
  newMessages: []
})

• 辅助函数：mapMutation()

import { mapMutation } from 'vuex'

const auxiliary = new Vue({
  store,
  methods:{
    // // 将 `this.addMessages()` 映射为 `this.$store.commit('addMessages')`
    ...mapMutations(['addMessages'])
  }
})

Action

• 作用：Action 类似于 mutation，不同在于：
    Action 提交的是 mutation，而不是直接变更状态。
    Action 可以包含任意异步操作。
    使用 store.dispatch()
• 调用方式：

import { store } from 'vuex'

const base = new Vue({
  store,
  methods: {
    handleSubmit() {
      this.$store.dispatch('getMessages')
    }
  }
}) 

dispatch 与 commit 调用语法相同

this.$store.dispatch({
  type: 'getMessages',
})

• 辅助函数：mapAction()

import { mapAction} from 'vuex'

const auxiliary = new Vue({
  store,
  methods:{
    // // 将 `this.getMessages()` 映射为 `this.$store.dispatch('getMessages')`
    ...mapAction(['getMessages'])
  }
})