axios+vuex走通Vuex全流程

axios+vuex走通Vuex全流程

安装：cnpm install vuex -S

创建    vue-cli x项目

命令：vue create xxx

在src中新建一个文件夹 store,在store中在新建modules文件和index.js文件

在moudles中创建js文件，写单个状态管理，

import ---   from ---//需要引入的文件
const   xxx = {创建实例化
​
    namespaced:true,  //命名空间
​
    state: { 元素
        arr
    },
    
    getters:{ 计算属性 },
    
    mutations:{ 同步
      fnyy(state,payload){
          //需要的操作
          state.arr = payload
      }
    },
    
    actions:{ 异步 
      fnxx(store,payload)
       //发送请求
       fetch(参数， ， ).then()
    }
  }
  
  export default xxx //导出文件 让index.js接收

index.js中就是所有的 状态管理的总集合，

<--以下三行都是写死的-->
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
​
//引入moudles中的文件
import xxx from "./moudles/xxx"
​
//实例化
const store =new Vuex.Store({
    modules:{
        xxx
    }
})

exprot default store //导出

然后要在main.js文件中关联起来

// 这是整个Vue项目的入口文件
// 安装Vue
import Vue from 'vue'
// 引入根组件
import App from './App.vue'
// 关闭项目启动的生产提示
Vue.config.productionTip = false
​
//接收 关联
import store from './store/index.js'    //index.js可以不写
​
// 创建根组件实例
new Vue({
  store,
  render: h => h(App),
}).$mount('#app')
// $mount() 手动挂载

现在开始在组件中开始操作了

Home.vue

在组件中进行页面渲染：

完毕

 

附：

跨域代理：

module.exports = {
  devServer: {
    // port: 8888,
    proxy: {
      // 代理，转发
      '/soso': {
        target: 'https://c.y.qq.com',
        ws: true,
        changeOrigin: true
      }
    }
  }
}

axios文件

import axios from 'axios'
​
let baseURL_dev = 'http://localhost:8080'  // 解决跨域问题
​
// 创建axios实例
const fetch = axios.create({
  baseURL: baseURL_dev,
  timeout: 7000,  // 超时设置
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})
​
// 封装请求拦截器
fetch.interceptors.request.use((config) => {
  // 在这里做一些检测或者包装等处理
  console.log('请求拦截', config)
  // 鉴权 token添加
  config.headers.Authorization = localStorage.getItem('token') || ''
  return config
})
​
// 封装响应拦截器
fetch.interceptors.response.use((response) => {
  // 请求成功
  console.log('响应拦截', response)
  // 数据过滤，根据后端标识字符来进行数据
  if (response.data && response.data.code==0) {
    return response.data.data
  } else {
    console.log('网络异步，请稍后再试')
  }
}, (error) => {
  // 请求失败
  return Promise.reject(error)
})
​
export default fetch