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
    }
  }
  
  

• 使用

<script>
import {mapState,mapMutation} from 'vuex'
export default {
    //state区域，与需要计算属性结合
    computed: {
        ...mapState([变量,变量2,....])
    },
    //mutations区域，进行修改数据，需要与methods结合
    methods: {
        ...mapMutation([方法名,方法名2,....])
    }, 
}
</script>

• 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>