這篇文章主要介紹了使用Vuex實現一個筆記應用的方法，現在分享給大家，也給大家做個參考。
最近開始著手學習 Vue，先大略的過了一遍官方文檔，跟著敲過一部分官方文檔中的 DEMO，然而還是不甚了。在網路上找到了一個入門的筆記應用，即使是入門級的應用，在學習途中依舊困難重重。特將學習作此筆記，方便今後回看，也希望能夠幫到剛開始學習Vue 的女同學
預期目標
1.新增
2.刪除
3.收藏
4.在全部筆記和收藏筆記間切換
5.在目前清單中進行搜尋
準備工作
#2.查看模組（愛看不看）
看看全域安裝的模組 npm list --depth=0 -global
3.建立專案
在命令列輸入vue init webpack vuex-note 並做好設置，建立一個專案
4.簡單解釋一下各個設定都是幹嘛的
- #vue init webpack vuex-note：初始化（init）一個使用webpack 建置工具建構的vue 項目，項目名為vuex-note
- Project name：項目名稱
- Project description：專案描述
- Author：朕
- Vue build：建置方式，分為獨立建置和運行時構建，具體說明請參見如下鏈接，這裡選擇獨立構建standalone https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
- #Install vue-router：是否需要安裝vue-router ，跳轉頁面用的，這裡用不著，我過會學
- Use ESLint to lint your code：ESLint 規範與法用的，可能你熟悉的寫法都是不標準的，如果採用ESLint 則可能報錯，這裡選擇n
- 剩下的都是測試用的，一路n
- Should we run 'npm install' for you after the project has been created：是否需要直接替你安裝（npm install）相關的依賴，回車就行，之後會替你安裝各種玩意
5.安裝完後會有提示，我們接著按照提示走
先是cd vuex-note 進入剛剛建立的vue專案資料夾
##後續操作
6.存取頁面
#此時透過瀏覽器存取localhost:8080 就可以開啟一個新的vue 頁面
嶄新的vue 頁面
7.專案結構
##截止目前的專案結構如圖
package.json 文件描述了專案包含的文件，專案如何運行等資訊
package.json
#9.安裝Vuex
已安裝了Vuex
- 零、想法
- 整個應用程式可拆分為三個元件
- 拆
- 每個筆記包括編號（ID），標題（title），內容（content），是否已收藏（fav） 四個資訊
而收藏，刪除操作只能對當前的筆記進行操作，因此我還需要一個標識用來記錄當前的筆記（activeNote） 是哪個
包含全部和收藏兩種切換方式，因此還需要有一個標識來進行區分，就叫show 吧，all 代表全部，fav 就代表已收藏 元件==> actions.js ==> mutations.js = > state：透過元件呼叫actions 中的方法（ dispatch），透過actions 中的方法呼叫mutations 中的方法（commit），透過mutations 中的方法去操作state 中的筆記清單（notes），當前筆記（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> <p id="app"></p> <!-- built files will be auto injected --> </body> </html>這個沒什麼說的，注意p 的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 時什麼時候需要' ./ '？
從專案模組匯出，引入時不需要./，而從自己寫的元件中引入時需要./
2.什麼時候需要import { aaa} from abc 這種加大括號的引進？什麼時候不需要？
當abc 中被導出的部分是export aaa 時
當import 的是被export default 導出的部分時不加{}，並且可以起個別名3.專案結構中並沒有store 文件，只有store 資料夾，那import store from './store' 是什麼意思？
不知道，求指教4. new Vue 中單獨的 store 是什麼意思？
ES6 的一種簡寫方式，縮寫之前是store:store，這句話的意思是為全域注入Vuex，這樣在各個元件中都可以透過this.$store 去呼叫狀態庫，如果不在全域注入，則需要在每個元件中單獨引入，多了會很麻煩三、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(), // 加时间是为了做一下区分
content: '笔记内容',
fav: false
}
// 可以理解为一个状态的仓库
const state = {
notes: [defaultNote], // 以数组方式存放所有的笔记
activeNote: defaultNote, // 用来记录当前笔记
show: 'all' // 用于切换 全部 / 已收藏 两种不同列表的标识
}
export default new Vuex.Store({
state,
getters,
mutations,
actions
})
1. Vue.use(Vuex) 是什麼意思？
使用Vuex，今後用Vue-router 時也得來這麼一出，只是得寫在route 資料夾下的index.js 檔案中
2. new Date() 是什麼意思？
取得時間戳記的另一種寫法，等同於new Date().getTime()- 3.state，getters，mutations，actions 之間的關係？
- state：如上所言狀態倉庫
getters：state 的修飾，例如state 中有str:"abc" 這麼個屬性，而在許多元件中需要進行str "def" 的操作，如果在每個元件都進行str "def" 的操作未免太麻煩，因此可以在getters 中增加：
##
strAdd(){
return this.str + "abc"
}#今後在元件中使用strAdd 就可以了
mutations：簡單講就是用來修改state 的，同步方法.常規呼叫this.$store.commit #actions：簡單講用來呼叫mutations 的，非同步方法.常規呼叫this.$store.dispatch
四、tool.vue
<template>
<p id="tool">
<button class="add" @click="add_note">新增</button>
<button class="fav" @click="fav_note">收藏</button>
<button class="del" @click="del_note">删除</button>
</p>
</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#########此外，當methods 和Vuex 的actions 中具有同名的屬性A 時，可使用mapActions(['A']) 這種方式簡寫#########注意：1、中括號不能省略；2、中括號內是字串；3、展開運算子...不能省略#########也可以取個別名，寫法如下，注意[] 變成了{}：########...map({
本组件的属性 : Vuex 中 actions 中的属性
})#######需要传入参数时，前提是 actions 中的属性（方法）能接收参数：
methods:{
...mapActions(['abc'])
// 自定义一个方法，通过触发这个方法调用之前重名的方法并传入参数
tragger_abc(参数){
this.abc(参数)
}
}
2.scoped
对当前组件生效的 CSS
3.calc
使用时记得在运算符前后各加一个空格
五、list.vue
<template>
<p id="list">
<p class="switch">
<button class="all" @click='get_switch_note("all")'>全部</button><button class="fav" @click='get_switch_note("fav")'>已收藏</button>
</p>
<p class="search">
<input type="text" placeholder="在这里搜索" v-model="search" />
</p>
<p class="noteList">
<p class="note" v-for="note in search_filteredNote" :class="{favColor:note.fav===true,active:note.id===activeNote.id}" @click='get_select_note(note)'>
<p class="title">
<p>{{note.title}}</p>
</p>
<p class="content">
<p>{{note.content}}</p>
</p>
</p>
</p>
</p>
</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']),
// 二次过滤：在当前列表(全部 或 已收藏)中进行筛选,返回值被用在组件的 v-for 中
search_filteredNote() {
if(this.search.length > 0) { // 如果输入框有值,返回二次过滤的结果并加载
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 中？
用来与搜索框进行关联。可以写在 computed 中，但 computed 中的属性默认都是 getter ，就是只能获取值，如果想修改，需要设置 setter ，详见官方文档
六、edit.vue
<template>
<p id="edit">
<p class="title">
<input type="text" placeholder="在这里输入标题" v-model="activeNote.title"/>
</p>
<p class="content">
<textarea name="" placeholder="在这里吐槽" v-model="activeNote.content"></textarea>
</p>
</p>
</template>
<script type="text/javascript">
import { mapState, mapGetter, mapActions } from 'vuex'
export default {
name: 'edit',
computed:{
...mapState(['activeNote']) // 当本组件中 computed 中的属性名与 Vuex 中的 state 属性名相同时,就可以在 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.这是干什么？
这里的每个方法实际上是通过 commit 调用 mutations.js 中的方法；
举个栗子：tool.vue 的 新增 按钮上绑了一个 add_note 自定义方法，在 actions.js 中也定义一个同名的方法，这样就可以在 tool.vue 中的 mapActions 中简写，就是下面这句：
# tool.vue ...mapActions(['add_note','del_note','fav_note'])
而 actions.js 中的 add_note 去调用 mutations.js 中写好的 ADD_NOTE 方法，而实际的添加操作也是在 ADD_NOTE 中，组件也好，actions 也好，最终只是调用 ADD_NOTE 。之所以这么做是因为 mutations 中的方法都是同步的，而 actions 中的方法是异步的，不过在本例里没啥区别
八、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
}
})
}
}
}
实现一个过滤，根据 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: '笔记内容',
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 函数的一种写法，中括号 + 常量 作为函数名，这里常量从其它文件引入
十、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 中的函数常量就是这里抛出的，查资料说是这么做便于一目了然都有那些方法。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
以上是使用Vuex實作一個筆記應用的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
JavaScript在行動中：現實世界中的示例和項目Apr 19, 2025 am 12:13 AMJavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用，涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。
JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AMJavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互；2)在用戶提交數據前進行客戶端驗證，提高用戶體驗；3)通過AJAX技術實現與服務器的無刷新通信。
了解JavaScript引擎：實施詳細信息Apr 17, 2025 am 12:05 AM理解JavaScript引擎內部工作原理對開發者重要，因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段；2)執行過程中，引擎會進行動態優化，如內聯緩存和隱藏類；3)最佳實踐包括避免全局變量、優化循環、使用const和let，以及避免過度使用閉包。
Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AMPython更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。
Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AMPython和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。
從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。
JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。
超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AMJavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
記事本++7.3.1
好用且免費的程式碼編輯器
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
Dreamweaver CS6
視覺化網頁開發工具
