Vuex实例+Axios+Store+Vuex+Vue2原创

接上一章Vuex实例

# 安装Axios
```
yarn add axios
```
1

# store 模块化

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import demo from './modules/demo/index.js'

Vue.use(Vuex)

export default new Vuex.Store({
	modules: {	
		demo		
	}
})

1
2
3
4
5
6
7
8
9
10
11

创建文件 modules\demo\index.js

const state = {
	
}
const getters = {
	
}
const mutations = {
	
}
const actions = {	

}

export default {
	namespaced: true,
	state,
	getters,
	actions,
	mutations
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# Axios 全局设置

我这里是建立一个api目录，request.js来封装axios

import axios from 'axios'

const service = axios.create({
  baseURL:'http://127.0.0.1:10000', //api地址
  timeout: 5000 
})
const err = (error) => {
  if (error.response) {
    if (error.response.status !== 200) { 
      const errorMessage = error.response
      console.log(errorMessage)
      return
    }
  }
  return Promise.reject(error)
}
service.interceptors.request.use(config => {  
    //请求头设置，根据自己的设置哦
   config.headers.id = '1637756574908';
  config.headers.sign = 'Wl5M1plS2hlb1pHTXdZalkzWm1Sa';
  let times = Date.parse(new Date().toString());//请求时间
    if(times){
      config.headers.time = times;       
    }
  return config
}, err)
service.interceptors.response.use((response) => {
  return response.data
}, err)
export {
  service as axios
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# Axios请求api

在api目录下创建demo\index.js

import { axios } from '@/api/request'
export function demoAllApi(data) {
    return axios({
        url: '/move/video/hot',
        method: 'post',
        data
    })
}
export function demoUserApi() {
    return axios({
        url: '/move/ceshi/all?user=user&pass=pass',
        method: 'get'
    })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 我们回到`store\modules\demo\index.js`文件

import { demoAllApi,demoUserApi } from "@/api/demo"
const state = {
	all: [],	
	user:[]
}
const getters = {
	all: (state) => {
		return state.all
	},
	user: (state) => {
		return state.user
	}
}
const mutations = {
	all(state, data) {
		state.all = data
	},
	user(state, data) {
		state.user = data
	},
}
const actions = {
	async all({ commit }, data) {		
		const res = await demoAllApi(data)
		commit('all', res)
	}
	,async user({ commit }) {		
		const res = await demoUserApi()	
		commit('user', res)
	}
}
export default {
	namespaced: true,
	state,
	getters,
	actions,
	mutations
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# 回到视图层`App.vue`我代码写这里。你们随意，一般来说是应该在demo.vue下

App.vue代码如下

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <button @click="demo_all()">查询</button>
    <br />   
    <br />
    <button @click="demo_user()">查询用户</button>

    <ul>
      <li
        v-for="(item,index) in userdata"
        :key="index"
        style="width: 100%; height: 20px;"
      >{{ item.user }}</li>
    </ul>

    <br />
    <ul>
      <li
        v-for="(item,index) in alldata"
        :key="index"
        style="width: 100%; height: 20px;"
      >{{ item.vod_name }}</li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex";
export default {
  name: "App",
  components: {},
  data() {
    return {
      alldata: {},
      userdata: {}     
    }
  },
  computed: {
    ...mapState({
      state_demo_user: state => state.demo.user
    }),
    ...mapGetters({
      getters_demo_all: ["demo/all"],
      getters_demo_user: ["demo/user"],
    }),
  },
  created: function () {
    // this.demo_all()
  },
  methods: {
    ...mapActions(['demo/all','demo/user']),
    demo_all() {
      let data = {
        'page': 1,
        'pageNum': 30
      };
      this["demo/all"](data)
        .then(() => {
          this.alldata = this.getters_demo_all.data;                 
        })
    },    
    demo_user() {
      this["demo/user"]()
        .then(() => {
          this.userdata = this.getters_demo_user.data;
        })
    },
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

# 完结。自己灵活运用。

编辑

#Vuex #Axios #Store #Vue2 #Vue

上次更新: 2022/08/19, 20:03:11

← Vuex Vue中的防抖函数封装和使用→

Vuex实例+Axios+Store+Vuex+Vue2原创

# 安装Axios

# store 模块化

# Axios 全局设置

# Axios请求api

# 我们回到store\modules\demo\index.js文件

# 回到视图层App.vue我代码写这里。你们随意，一般来说是应该在demo.vue下

# 完结。自己灵活运用。

# 安装`Axios`

# 我们回到`store\modules\demo\index.js`文件

# 回到视图层`App.vue`我代码写这里。你们随意，一般来说是应该在demo.vue下