三篇笔记入门nuxt——nuxt中的vuex

本文仅仅为笔者笔记，且本文针对拥有vue的基础的人群，若无vue基础请勿喷谢谢。

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 即新增的数据

vuex 请求接口并存储

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