mutations

值为一个对象，包含多个直接更新 state 的方法。不能写异步代码，只能单纯地操作 state。

1.在 src\store\index.js添加mutations属性并且写入一个方法。

// 创建数据仓库
const store = new Vuex.Store({
  //在vueX中有一个专门提供修改state的方法
  mutations:{
    addNum(state){
      state.num++
    }
  }
})

2.在组件中调用方法。

export default {
  methods:{
    add(){
      //调用store的提交函数执行在mutations的函数
      this.$store.commit('addNum')
    }
  }
}

actions

• 值为一个对象，包含多个响应用户动作的回调函数
• 通过 commit()触发 mutation 中函数的调用，间接更新 state
• 可包含异步代码

就是调接口与后端进行交互。需要用到 axios

1.终端输入命令下载axios。

npm i axios -S

2.在 src目录下新建 utils目录并且在里面新建 fetch.js文件。

fetch.js:

这里以cNode提供的借口为示例。

// 导入axios包
import axios from 'axios'
// 定义url前缀
const baseURL = 'https://cnodejs.org'
// 创建实例
const instance = axios.create({
  baseURL,
  timeout: 7000,
  headers: { }
})

// 拦截器
// 创建一个请求拦截器
instance.interceptors.request.use(function (config) {
  return config
}, function (error) {
  // Do something with request error
  return Promise.reject(error)
})

// 创建一个响应拦截器
instance.interceptors.response.use(function (response) {
  return response
}, function (error) {
  return Promise.reject(error)
})

export default instance

3.在vuex的组装模块并且导出的store的文件导入axios请求的文件。

// @是src跟路径
import axios from '@/utils/fetch'

4.在实例中添加actions属性。

const store = new Vuex.Store({
  actions:{
    getList(){
      fetch({
        url:'/api/v1/topics',
        method:'GET',
        params:{},
      }).then(res=>{
        console.log('---文章列表',res)
      })
    }
  }
})

5.在要显示的组件里添加 mounted(){}挂载方法。让获取数据的方法在页面启动时就调用。

mounted(){
    this.$store.dispatch('getList',{page:1,limit:5,tab:'ask'})
  }

加载更多数据

。。。