创建项目
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映射到局部计算属性：
