創(chuàng)建項(xiàng)目
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下創(chuàng)建router文件夾router/index.js
import Vue from "vue";
import Router from "vue-router";
// 引入組件
import Login from "@/components/login";
//注冊(cè)組件
Vue.use(Router);
//導(dǎo)出組件
export default new Router({
routes: [
{
path: "/",
name: "login",
component: Login
}
],
mode: "history" //去除地址欄中的#號(hào)
});
- main.js中引入路由
import router from "./router";
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App)
}).$mount("#app");
- 引入 Element
//在 main.js 中添加以下內(nèi)容：
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
- 引入重置樣式reset.css
在src下新建css/reset.css文件網(wǎng)上下載reset.css樣式，
在index.html中:
<link rel="stylesheet" href="../src/static/css/reset.css">
vue中的節(jié)點(diǎn)操作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節(jié)點(diǎn)的消耗
}
}
})
</script>
一般來(lái)講，獲取DOM元素，需document.querySelector（".input1"）獲取這個(gè)dom節(jié)點(diǎn)，然后在獲取input1的值。
但是用ref綁定之后，我們就不需要在獲取dom節(jié)點(diǎn)了，直接在上面的input上綁定input1，然后$refs里面調(diào)用就行。
然后在javascript里面這樣調(diào)用：this.$refs.input1 這樣就可以減少獲取dom節(jié)點(diǎn)的消耗了。
前后端數(shù)據(jù)交互--axios
- 安裝axios
npm i -S axios
- 在main.js中
// 引入axios
import axios from "axios";
// 掛載在vue的原型上，這樣每個(gè)vue實(shí)例都可以使用這個(gè)方法
Vue.prototype.axios = axios;
用node.js啟動(dòng)一個(gè)后端服務(wù)接口
//全局安裝express
npm install express -g
npm install -g express-generator
//創(chuàng)建服務(wù)項(xiàng)目
express server -e
// 初始化項(xiàng)目
cd server
npm install
//啟動(dòng)服務(wù)器
nodemon app
解決跨域問(wèn)題 --- 配置代理
創(chuàng)建vue.config.js文件
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:888',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': '' //通過(guò)pathRewrite重寫地址，將前綴/api轉(zhuǎn)為/
}
}
}
}
//在頁(yè)面發(fā)起請(qǐng)求：
axios.get('/api/address').then(res => {
console.log(res)
})
此處改為請(qǐng)求https://jsonplaceholder.typicode.com/users接口數(shù)據(jù)
登錄成功后請(qǐng)求到數(shù)據(jù)，利用vuex存儲(chǔ)數(shù)據(jù)
創(chuàng)建index.vue后臺(tái)頁(yè)面,然后配置路由
vue組件異步加載
- 使用() => import()
const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1')
- 使用resolve => require(['./_account'], resolve)
- 使用Webpack 的內(nèi)置語(yǔ)句： import(*)
vuex數(shù)據(jù)處理
- 安裝
npm i vuex -S
創(chuàng)建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");
一般在組件中觸發(fā)mutations
// login.vue中
_this.$store.commit("SAVE_USERINFO",response.data[0])
在刷新頁(yè)面后要確保數(shù)據(jù)依然存在,則需要在拿到數(shù)據(jù)后將其存入本地存儲(chǔ)
localStorage.setItem('userInfo',JSON.stringify(response.data[0]));
上面做法任然會(huì)在刷新后數(shù)據(jù)沒(méi)有，采取以下做法：直接將數(shù)據(jù)提交到store的state中，然后在mutations 中先將數(shù)據(jù)存到本地存儲(chǔ)，然后再更新數(shù)據(jù).
const state = {
userInfo: JSON.parse(localStorage.getItem("userInfo"))
};
const mutations = {
SAVE_USERINFO(state, userInfo) {
// 先將數(shù)據(jù)存到本地存儲(chǔ)
localStorage.setItem("userInfo", JSON.stringify(userInfo));
state.userInfo = userInfo;
}
};
在組件中獲取state有兩種方式(home.vue)
第一種在組件中直接拿
<span>{{$store.state.userInfo.username}}</span>
第二種通過(guò)計(jì)算屬性computed獲取store的數(shù)據(jù)
computed: {
username() {
return this.$store.state.userInfo.username;
}
}
- mapState輔助函數(shù)(推薦使用)
import {mapState} from "vuex";
computed:{
...mapState({
userinfo:state => state.userInfo;
})
}
actions處理異步操作
// store.js
// 1. 在state中添加userList存儲(chǔ)用戶列表的數(shù)據(jù)
const state = {
userInfo: JSON.parse(localStorage.getItem("userInfo")),
userList: []
};
// 2. 在mutations中添加獲取用戶列表的函數(shù)
const mutations = {
GET_USERLIST(state,userlist){
state.userList = userlist;
}
}
// 定義actions,異步的，主要是用來(lái)commit mutations，再有mutations來(lái)改變狀態(tài)state
const actions = {
GET_USERLIST({ commit }) {
return new Promise((resolve, reject) => {
// 此處的請(qǐng)求為異步操作 為了能拿到數(shù)據(jù)，就在外面包一層promise
axios.get("https://jsonplaceholder.typicode.com/users").then(res => {
// console.log("獲取用戶數(shù)據(jù)", res.data);
commit("GET_USERLIST", res.data);
resolve();
});
});
}
};
//main.js觸發(fā)actions測(cè)試數(shù)據(jù)獲取
store.dispatch("GET_USERLIST").then(() => {
console.log("獲取數(shù)據(jù)：", store.state.userList);
});
在用戶列表組件里，可在生命周期鉤子函數(shù)里去獲取數(shù)據(jù)
// userlist.vue
created(){
this.$store.dispatch("GET_USERLIST").then(()=>{
const data = this.$store.state.userList;
this.tableData = data;
})
}
可以用輔助函數(shù)來(lái)簡(jiǎn)化操作：
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
有時(shí)候我們需要從 store 中的 state 中派生出一些狀態(tài)，例如對(duì)列表進(jìn)行過(guò)濾并計(jì)數(shù).
Vuex在store中定義的getters可以認(rèn)為是store的計(jì)算屬性，getters的返回值會(huì)根據(jù)它的依賴被緩存起來(lái)，且只有當(dāng)它的以來(lái)至發(fā)生改變才會(huì)被重新計(jì)算。
Getter接受state作為第一個(gè)參數(shù)，Getter會(huì)暴露為store.getters對(duì)象，你可以以屬性的形式訪問(wèn)這些值。
你也可以通過(guò)讓 getter 返回一個(gè)函數(shù)，來(lái)實(shí)現(xiàn)給 getter 傳參。在你對(duì) store 里的數(shù)組進(jìn)行查詢時(shí)非常有用。
getters:{
getTodoById:(state) => (id) => {
return state.todos.find(todo => todo.id === id);
}
}
注意，getter 在通過(guò)方法訪問(wèn)時(shí)，每次都會(huì)去進(jìn)行調(diào)用，而不會(huì)緩存結(jié)果。
輔助函數(shù)mapGetters
mapGetters 輔助函數(shù)僅僅是將store中的getter映射到局部計(jì)算屬性：
