vuex+axios+es6+vue-router+elemen

2019-10-17 本文已影响0人北风吹_yfy

创建项目


vue create vuextest2

cd vuextest2

yarn serve

安装vuex ,vue-router, element-ui


// 安装 vuex

npm install vuex --save

//或

yarn add vuex

//安装vue-router

npm install --save vue-router

//安装element-ui

npm i element-ui -S

在src下创建router文件夹router/index.js


import Vue from "vue";

import Router from "vue-router";

// 引入组件

import Login from "@/components/login";

//注册组件

Vue.use(Router);

//导出组件

export default new Router({

  routes: [

    {

      path: "/",

      name: "login",

      component: Login

    }

  ],

  mode: "history" //去除地址栏中的#号

});

main.js中引入路由


import router from "./router";

Vue.config.productionTip = false;

new Vue({

  router,

  render: h => h(App)

}).$mount("#app");

引入 Element


//在 main.js 中添加以下内容：

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

引入重置样式reset.css

在src下新建css/reset.css文件网上下载reset.css样式，

在index.html中:


<link rel="stylesheet" href="../src/static/css/reset.css">

vue中的节点操作ref和this.$refs.名称


<div id="app">

    <input type="text" ref="input1" class="input1"/>

    <button @click="add">添加</button>

</div>

<script>

new Vue({

    el: "#app",

    methods:{

        add:function(){

          this.$refs.input1.value ="22"; //this.$refs.input1  减少获取dom节点的消耗

        }

    }

})

</script>

一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。

然后在javascript里面这样调用：this.$refs.input1 这样就可以减少获取dom节点的消耗了。

前后端数据交互--axios

安装axios


npm i -S axios

在main.js中


// 引入axios

import axios from "axios";

// 挂载在vue的原型上，这样每个vue实例都可以使用这个方法

Vue.prototype.axios = axios;

用node.js启动一个后端服务接口


//全局安装express

npm install express -g

npm install -g express-generator

//创建服务项目

express server -e

// 初始化项目

cd server

npm install

//启动服务器

nodemon app

解决跨域问题 --- 配置代理

创建vue.config.js文件


module.exports = {

  devServer: {

  proxy: {

    '/api': {

      target: 'http://localhost:888',

      ws: true,

      changeOrigin: true,

      pathRewrite: {

        '^/api': ''  //通过pathRewrite重写地址，将前缀/api转为/

      }

    }

  }

}

//在页面发起请求：

axios.get('/api/address').then(res => {

  console.log(res)

})

此处改为请求https://jsonplaceholder.typicode.com/users接口数据

登录成功后请求到数据，利用vuex存储数据

创建index.vue后台页面,然后配置路由

vue组件异步加载

使用() => import()


const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1')

使用resolve => require(['./_account'], resolve)

使用Webpack 的内置语句： import(*)

vuex数据处理

安装


npm i vuex -S

创建store/store.js文件


import Vue from "vue";

import Vuex from "vuex";

Vue.use(Vuex);

const state = {

  userInfo: {}

};

const mutations = {

  SAVE_USERINFO(state, userInfo) {

    state.userInfo = userInfo;

  }

};

export default new Vuex.Store({

  state,

  mutations

});

在main.js中引入store


import store from "./store/store";

new Vue({

  router,

  store,

  render: h => h(App)

}).$mount("#app");

一般在组件中触发mutations


// login.vue中

_this.$store.commit("SAVE_USERINFO",response.data[0])

在刷新页面后要确保数据依然存在,则需要在拿到数据后将其存入本地存储


localStorage.setItem('userInfo',JSON.stringify(response.data[0]));

上面做法任然会在刷新后数据没有，采取以下做法：直接将数据提交到store的state中，然后在mutations 中先将数据存到本地存储，然后再更新数据.


const state = {

  userInfo: JSON.parse(localStorage.getItem("userInfo"))

};

const mutations = {

  SAVE_USERINFO(state, userInfo) {

    // 先将数据存到本地存储

    localStorage.setItem("userInfo", JSON.stringify(userInfo));

    state.userInfo = userInfo;

  }

};

在组件中获取state有两种方式(home.vue)

第一种在组件中直接拿


<span>{{$store.state.userInfo.username}}</span>

第二种通过计算属性computed获取store的数据


computed: {

    username() {

      return this.$store.state.userInfo.username;

    }

  }

mapState辅助函数(推荐使用)


import {mapState} from "vuex";

computed:{

  ...mapState({

    userinfo:state => state.userInfo;

  })

}

actions处理异步操作


// store.js

// 1. 在state中添加userList存储用户列表的数据

const state = {

  userInfo: JSON.parse(localStorage.getItem("userInfo")),

  userList: []

};

// 2. 在mutations中添加获取用户列表的函数

const mutations = {

  GET_USERLIST(state,userlist){

    state.userList = userlist;

  }

}

// 定义actions,异步的，主要是用来commit mutations，再有mutations来改变状态state

const actions = {

  GET_USERLIST({ commit }) {

    return new Promise((resolve, reject) => {

      // 此处的请求为异步操作 为了能拿到数据，就在外面包一层promise

      axios.get("https://jsonplaceholder.typicode.com/users").then(res => {

        //   console.log("获取用户数据", res.data);

        commit("GET_USERLIST", res.data);

        resolve();

      });

    });

  }

};

//main.js触发actions测试数据获取

store.dispatch("GET_USERLIST").then(() => {

  console.log("获取数据：", store.state.userList);

});

在用户列表组件里，可在生命周期钩子函数里去获取数据


// userlist.vue

created(){

  this.$store.dispatch("GET_USERLIST").then(()=>{

    const data = this.$store.state.userList;

    this.tableData = data;

  })

}

可以用辅助函数来简化操作：


import {mapState,mapActions} from "vuex";

// mapState

created() {

  this.$store.dispatch("GET_USERLIST").then(() => {

    //   const data = this.$store.state.userList;

    //   this.tableData = data;

    this.tableData = this.userList;

  });

},

computed:{

  // ...mapState(["userList"])

  ...mapState({

    userList:state => state.userList;

  })

}


//mapActions

created(){

  this.GET_USERLIST().then(() => {

    this.tableData = this.userList;

  })

},

methods:{

  ...mapActions(["GET_USERLIST"]);

}

Getter

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数.

Vuex在store中定义的getters可以认为是store的计算属性，getters的返回值会根据它的依赖被缓存起来，且只有当它的以来至发生改变才会被重新计算。

Getter接受state作为第一个参数，Getter会暴露为store.getters对象，你可以以属性的形式访问这些值。

你也可以通过让 getter 返回一个函数，来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。


getters:{

  getTodoById:(state) => (id) => {

    return state.todos.find(todo => todo.id === id);

  }

}

注意，getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。

辅助函数mapGetters

mapGetters 辅助函数仅仅是将store中的getter映射到局部计算属性：