Nuxt整合 vuex

某厂面试归来，发现自己落伍了！>>>

在nuxt中，只编写vuex的核心内容。

• 编写内容

//state区域，相当于定义变量
export const state = () => ({
  
})

//mutations区域，用于修改数据
export const mutations = {
  方法名 (state,值) {
    
  }
}

• state区域注意实现

  //state 区域，相当于定义变量
  export const state = ()=> {
    return {
  
    }
  }
  //省略写法
  export const state = () => ({
  
  })
  

实例 【掌握】

• 1. 创建 ~/store/index.js ，编写如下内容

  //state 区域，相当于定义变量
  export const state = () => ({
    pageInfo: ''
  })
  
  //mutations区域，用于修改数据
  export const mutations = {
    setData( state , value) {
      state.pageInfo = value
    }
  }
  
  

• 2. 完成fetch操作

<template>
  <div>
      {{ this.$store.state.pageInfo }}
  </div>
</template>

<script>
export default {
  async fetch( {$axios, store } ) {
    //发送ajax
    let { data } = await $axios.get('/userservice/user/list')
    console.info( data )
    //将查询结果保存vuex
    store.commit('setData', data.data )
  }
}
</script>

<style>

</style>

来源：oschina

链接：https://my.oschina.net/tingqianyunluo/blog/3196987