本文僅僅為筆者筆記，且本文針對(duì)擁有vue的基礎(chǔ)的人群，若無(wú)vue基礎(chǔ)請(qǐng)勿噴謝謝。

vuex的使用

store

demo.js

demo.js

export const state = () => (
  {
    key: 'value'
  }
)

// mutations的使用
export const mutations = {
  add(state, playload) {
    state.key = playload;
  }
}

// actions的使用
export const actions = {
  addAction (context, playload) {
    setTimeout(() => {
      context.commit('change', playload)
    },1000)
  }
}

Component

export default {
  computed: {
    key() {
      return this.$store.state.demo.key
    }
  },
  methods: {
    add() {
      this.$store.commit('demo/add', 'new data')
    },
    addAction() {
      this.$store.dispatch('demo/addAction', new Data)
    }
  }
}

playload 即新增的數(shù)據(jù)

vuex 請(qǐng)求接口并存儲(chǔ)

async fetch({ $axios, store }) {
  const response = await $axios.get(url)
  store.commit('xxx/xxx', response.data)
}