溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容主要講解“如何使用Vuex實(shí)現(xiàn)一個筆記應(yīng)用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“如何使用Vuex實(shí)現(xiàn)一個筆記應(yīng)用”吧!
預(yù)期目標(biāo)
筆記具備如下基本功能
1.新增
2.刪除
3.收藏
4.在全部筆記和收藏筆記間切換
5.在當(dāng)前列表中進(jìn)行搜索
賣家秀
買家秀
準(zhǔn)備工作
1.新建項(xiàng)目
選個文件夾存放項(xiàng)目，這里我用的是 Git Bush 執(zhí)行語句（$ 符號是 Git Bush 中自帶的），你也可以使用命令行，一樣的
選擇項(xiàng)目存放位置
2.查看模塊（愛看不看）
查看一下全局安裝的模塊 npm list --depth=0 -global
查看全局安裝的模塊
3.創(chuàng)建項(xiàng)目
在命令行輸入 vue init webpack vuex-note 并做好設(shè)置，創(chuàng)建一個項(xiàng)目
這都什么鬼
4.簡單解釋一下各個配置都是干嘛的
vue init webpack vuex-note：初始化（init）一個使用 webpack 構(gòu)建工具構(gòu)建的 vue 項(xiàng)目，項(xiàng)目名為 vuex-note
Project name：項(xiàng)目名
Project description：項(xiàng)目描述
Author：朕
Vue build：構(gòu)建方式，分為獨(dú)立構(gòu)建和運(yùn)行時(shí)構(gòu)建，具體說明見如下鏈接，這里選擇獨(dú)立構(gòu)建 standalone https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
Install vue-router：是否需要安裝 vue-router ，跳轉(zhuǎn)頁面用的，這里用不著，我過會學(xué)
Use ESLint to lint your code：ESLint 規(guī)范與法用的，可能你熟悉的寫法都是不標(biāo)準(zhǔn)的，如果采用 ESLint 則可能報(bào)錯，這里選擇 n
剩下的都是測試用的，一路 n
Should we run 'npm install' for you after the project has been created：是否需要直接替你安裝（npm install）相關(guān)的依賴，回車就行，之后會替你安裝各種玩意
5.安裝完后會有提示，我們接著按照提示走
先是 cd vuex-note 進(jìn)入剛剛創(chuàng)建的 vue 項(xiàng)目文件夾
安裝完成
再通過 npm run dev 跑起項(xiàng)目
后續(xù)操作
6.訪問頁面
此時(shí)通過瀏覽器訪問 localhost:8080 就可以打開一個新的 vue 頁面
嶄新的 vue 頁面
7.項(xiàng)目結(jié)構(gòu)
截止目前的項(xiàng)目結(jié)構(gòu)如圖
項(xiàng)目結(jié)構(gòu)
由于是初學(xué)，為了先搞個東西出來，所以暫時(shí)先不管一些亂七八糟的配置，只挑跟這次相關(guān)的說（其實(shí)多了我也沒學(xué)到...）
8.查看 Vuex
既然是使用 Vuex 來實(shí)現(xiàn)筆記應(yīng)用，我們就應(yīng)該先查看一下構(gòu)建的項(xiàng)目是否包含 Vuex 模塊。
node_modules 文件夾包含了現(xiàn)有的模塊，然而里面并沒有我們想要的 Vuex，不信自己去看
package.json 文件描述了項(xiàng)目包含的文件，項(xiàng)目如何運(yùn)行等信息
package.json
9.安裝 Vuex
在命令行中輸入 npm install vuex --save：--save 就是將安裝信息寫入 package.json
已安裝了 Vuex
至此，所有前期工作已經(jīng)準(zhǔn)備完成，遺漏的部分將在實(shí)現(xiàn)過程中逐一解釋
搞起
零、思路
整個應(yīng)用可拆分為三個組件
拆
每條筆記包括 編號（ID），標(biāo)題（title），內(nèi)容（content），是否已收藏（fav） 四種信息
Vuex 中的 state 得有個地方存放 所有的筆記（notes）
而 收藏，刪除 操作只能對 當(dāng)前的筆記 進(jìn)行操作，因此我還需要一個標(biāo)識用來記錄 當(dāng)前的筆記（activeNote） 是哪個
包含 全部 和 收藏 兩種切換方式，因此還需要有一個標(biāo)識來進(jìn)行區(qū)分，就叫 show 吧，all 代表 全部，fav 就代表 已收藏
組件 ==> actions.js ==> mutations.js = > state：通過組件調(diào)用 actions 中的方法（dispatch），通過 actions 中的方法調(diào)用 mutations 中的方法（commit），通過 mutations 中的方法去操作 state 中的筆記列表（notes），當(dāng)前筆記（activeNote）等等
一、index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vuex-note</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
這個沒什么說的，注意 div 的 ID 就行
二、main.js
import Vue from 'vue'
import App from './App'
import store from './store'
Vue.config.productionTip = false
new Vue({
el: '#app',
store,
components: { App },
template: '<App/>'
})1.在 import 時(shí)什么時(shí)候需要 ' ./ '？
從項(xiàng)目模塊中導(dǎo)出，引入時(shí)不需要 ./，而從自己寫的組件中引入時(shí)需要 ./
2.什么時(shí)候需要 import {aaa} from abc 這種加大括號的引入？什么時(shí)候不需要？
當(dāng) abc 中被導(dǎo)出的部分是 export aaa 時(shí)
當(dāng) import 的是被 export default 導(dǎo)出的部分時(shí)不加 {}，并且可以起個別名
3.項(xiàng)目結(jié)構(gòu)中并沒有 store 文件，只有 store 文件夾，那 import store from './store' 是什么意思？
不知道，求指教
4. new Vue 中單獨(dú)的 store 是什么意思？
ES6 的一種簡寫方式，縮寫之前是 store:store，這句話的意思是為全局注入 Vuex，這樣在各個組件中都可以通過 this.$store 去調(diào)用狀態(tài)庫，如果不在全局注入，則需要在每個組件中單獨(dú)引入，多了會很麻煩
三、store 下的 index.js
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
Vue.use(Vuex)
const defaultNote = {
id: +new Date(),
title: '新建筆記' + new Date().getMilliseconds(), // 加時(shí)間是為了做一下區(qū)分
content: '筆記內(nèi)容',
fav: false
}
// 可以理解為一個狀態(tài)的倉庫
const state = {
notes: [defaultNote], // 以數(shù)組方式存放所有的筆記
activeNote: defaultNote, // 用來記錄當(dāng)前筆記
show: 'all' // 用于切換 全部 / 已收藏 兩種不同列表的標(biāo)識
}
export default new Vuex.Store({
state,
getters,
mutations,
actions
})1. Vue.use(Vuex) 是什么意思？
使用 Vuex，今后用 Vue-router 時(shí)也得來這么一出，只是得寫在 route 文件夾下的 index.js 文件中
2. +new Date() 是什么意思？
獲取時(shí)間戳的另一種寫法，等同于 new Date().getTime()
3.state，getters，mutations，actions 之間的關(guān)系？
state：如上所言狀態(tài)倉庫
getters：state 的修飾，比如 state 中有 str:"abc" 這么個屬性，而在很多組件中需要進(jìn)行 str + "def" 的操作，如果在每個組件都進(jìn)行 str + "def" 的操作未免太麻煩，于是可以在 getters 中增加：
strAdd(){
return this.str + "abc"
}今后在組件中使用 strAdd 就可以了
mutations：簡單講就是用來修改 state 的，同步方法.常規(guī)調(diào)用 this.$store.commit
actions：簡單講用來調(diào)用 mutations 的，異步方法.常規(guī)調(diào)用 this.$store.dispatch
四、tool.vue
<template>
<div id="tool">
<button class="add" @click="add_note">新增</button>
<button class="fav" @click="fav_note">收藏</button>
<button class="del" @click="del_note">刪除</button>
</div>
</template>
<script type="text/javascript">
import { mapState, mapGetter, mapActions } from 'vuex'
export default {
name: 'tool',
methods:{
...mapActions(['add_note','del_note','fav_note'])
}
}
</script>
<style type="text/css" scoped>
#tool {
width: 200px;
height: 600px;
border: 2px solid #ccc;
float: left;
}
button {
width: 100%;
height: calc(100% / 3);
font-size: 60px;
}
</style>1.mapState, mapGetter, mapActions 都是什么？
這里有個非常好的解釋 http://www.imooc.com/article/14741
此外，當(dāng) methods 和 Vuex 的 actions 中具有同名的屬性 A 時(shí)，可使用 mapActions(['A']) 這種方式簡寫
注意：1、中括號不能省略；2、中括號內(nèi)是字符串；3、展開運(yùn)算符...不能省略
也可以取個別名，寫法如下，注意 [] 變成了 {}：
...map({
本組件的屬性 : Vuex 中 actions 中的屬性
})需要傳入?yún)?shù)時(shí)，前提是 actions 中的屬性（方法）能接收參數(shù)：
methods:{
...mapActions(['abc'])
// 自定義一個方法，通過觸發(fā)這個方法調(diào)用之前重名的方法并傳入?yún)?shù)
tragger_abc(參數(shù)){
this.abc(參數(shù))
}
}2.scoped
對當(dāng)前組件生效的 CSS
3.calc
使用時(shí)記得在運(yùn)算符前后各加一個空格
五、list.vue
<template>
<div id="list">
<div class="switch">
<button class="all" @click='get_switch_note("all")'>全部</button><button class="fav" @click='get_switch_note("fav")'>已收藏</button>
</div>
<div class="search">
<input type="text" placeholder="在這里搜索" v-model="search" />
</div>
<div class="noteList">
<div class="note" v-for="note in search_filteredNote" :class="{favColor:note.fav===true,active:note.id===activeNote.id}" @click='get_select_note(note)'>
<div class="title">
<p>{{note.title}}</p>
</div>
<div class="content">
<p>{{note.content}}</p>
</div>
</div>
</div>
</div>
</template>
<script type="text/javascript">
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
name: 'list',
data: function() {
return {
search: ""
}
},
computed: {
...mapState(['notes', 'activeNote']),
...mapGetters(['filteredNote']),
// 二次過濾：在當(dāng)前列表(全部 或 已收藏)中進(jìn)行篩選,返回值被用在組件的 v-for 中
search_filteredNote() {
if(this.search.length > 0) { // 如果輸入框有值,返回二次過濾的結(jié)果并加載
return this.filteredNote.filter(note => {
if(note.title.indexOf(this.search) > 0) {
return note
}
})
} else { // 輸入框沒值,不過濾,直接拿來加載
return this.filteredNote
}
}
},
methods: {
...mapActions(['select_note', 'switch_note']),
get_select_note(note) {
this.select_note(note)
},
get_switch_note(type) {
this.switch_note(type)
}
}
}
</script>
<style type="text/css" scoped="scoped">
#list {
width: 300px;
height: 600px;
border: 2px solid #ccc;
float: left;
margin-left: 10px;
display: flex;
flex-direction: column;
}
p {
margin: 0;
}
.switch {}
.switch button {
height: 60px;
width: 50%;
font-size: 40px;
}
.search {
border: 1px solid #CCCCCC
}
input {
width: 100%;
box-sizing: border-box;
height: 50px;
line-height: 50px;
padding: 10px;
outline: none;
font-size: 20px;
border: none;
}
.noteList {
flex-grow: 1;
overflow: auto;
}
.note {
border: 1px solid #CCCCCC;
}
.favColor {
background: pink;
}
.active {
background: lightblue
}
</style>1.data 中的 search 是干嘛的？可不可以寫在 computed 中？
用來與搜索框進(jìn)行關(guān)聯(lián)?？梢詫懺?computed 中，但 computed 中的屬性默認(rèn)都是 getter ，就是只能獲取值，如果想修改，需要設(shè)置 setter ，詳見官方文檔
六、edit.vue
<template>
<div id="edit">
<div class="title">
<input type="text" placeholder="在這里輸入標(biāo)題" v-model="activeNote.title"/>
</div>
<div class="content">
<textarea name="" placeholder="在這里吐槽" v-model="activeNote.content"></textarea>
</div>
</div>
</template>
<script type="text/javascript">
import { mapState, mapGetter, mapActions } from 'vuex'
export default {
name: 'edit',
computed:{
...mapState(['activeNote']) // 當(dāng)本組件中 computed 中的屬性名與 Vuex 中的 state 屬性名相同時(shí),就可以在 mapState() 中簡寫
}
}
</script>
<style type="text/css" scoped="scoped">
#edit {
width: 300px;
height: 600px;
border: 2px solid #ccc;
float: left;
margin-left: 10px;
display: flex;
flex-direction: column;
}
.title {
border: 1px solid #CCCCCC;
}
input {
width: 100%;
box-sizing: border-box;
height: 50px;
line-height: 50px;
padding: 10px;
outline: none;
font-size: 20px;
border: none;
}
.content {
flex-grow: 1;
background: orange;
display: flex;
flex-direction: column;
}
textarea {
width: 100%;
box-sizing: border-box;
flex-grow: 1;
resize: none;
padding: 10px;
font-size: 20px;
outline: none;
font-family: inherit;
}
</style>七、actions.js
export default {
add_note({commit}) {
commit('ADD_NOTE')
},
select_note({commit}, note) {
commit("SELECT_NOTE", note)
},
del_note({commit}) {
commit("DEL_NOTE")
},
fav_note({commit}) {
commit("FAV_NOTE")
},
switch_note({commit}, type) {
commit("SWITCH_NOTE", type)
}
}1.這是干什么？
這里的每個方法實(shí)際上是通過 commit 調(diào)用 mutations.js 中的方法；
舉個栗子：tool.vue 的 新增 按鈕上綁了一個 add_note 自定義方法，在 actions.js 中也定義一個同名的方法，這樣就可以在 tool.vue 中的 mapActions 中簡寫，就是下面這句：
# tool.vue ...mapActions(['add_note','del_note','fav_note'])
而 actions.js 中的 add_note 去調(diào)用 mutations.js 中寫好的 ADD_NOTE 方法，而實(shí)際的添加操作也是在 ADD_NOTE 中，組件也好，actions 也好，最終只是調(diào)用 ADD_NOTE 。之所以這么做是因?yàn)?mutations 中的方法都是同步的，而 actions 中的方法是異步的，不過在本例里沒啥區(qū)別
八、getters.js
export default {
filteredNote: (state) => {
if(state.show === 'all') {
return state.notes
} else {
return state.notes.filter((note) => {
if(note.fav === true) {
return note
}
})
}
}
}實(shí)現(xiàn)一個過濾，根據(jù) show 來判斷展示 全部筆記 還是 已收藏筆記
九、mutations.js
import { SWITCH_NOTE, ADD_NOTE, SELECT_NOTE, DEL_NOTE, FAV_NOTE } from './mutation-types'
export default {
[ADD_NOTE](state, note = {
id: +new Date(),
title: '新建筆記' + new Date().getMilliseconds(),
content: '筆記內(nèi)容',
fav: false
}) {
state.notes.push(note)
state.activeNote = note
},
[SELECT_NOTE](state, note) {
state.activeNote = note
},
[DEL_NOTE](state) {
for(let i = 0; i < state.notes.length; i++) {
if(state.notes[i].id === state.activeNote.id) {
state.notes.splice(i, 1)
state.activeNote = state.notes[i] || state.notes[i - 1] || {}
return
}
}
},
[FAV_NOTE](state) {
state.activeNote.fav = !state.activeNote.fav
},
[SWITCH_NOTE](state, type) {
state.show = type
}
}1.export default 那里看著好熟悉
ES6 函數(shù)的一種寫法，中括號 + 常量 作為函數(shù)名，這里常量從其它文件引入
十、mutation-types.js
export const ADD_NOTE = "ADD_NOTE" export const SELECT_NOTE = "SELECT_NOTE" export const DEL_NOTE = "DEL_NOTE" export const FAV_NOTE = "FAV_NOTE" export const SWITCH_NOTE = "SWITCH_NOTE"
拋出常量，mutations.js 中的函數(shù)常量就是這里拋出的，查資料說是這么做便于一目了然都有那些方法。
到此，相信大家對“如何使用Vuex實(shí)現(xiàn)一個筆記應(yīng)用”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼