ホームページ >ウェブフロントエンド >jsチュートリアル >Vuex を使用してメモを取るアプリケーションを実装する方法
この記事では、Vuex を使用してメモ作成アプリケーションを実装する方法を主に紹介しますので、参考にしてください。
私は最近 Vue を学び始めました。最初に公式ドキュメントをざっと読んでから、公式ドキュメントにデモをいくつか打ち込みましたが、まだよく理解できません。入門レベルのノート作成アプリケーションをインターネットで見つけました。入門レベルのアプリケーションであっても、それでも習得するのは難しいです。このノートは、将来的に復習できるように特別に作成しました。また、Vue を学習し始めたばかりの女性の学生に役立つことを願っています
目的
このノートには、次の基本的な機能があります
1。 . 追加
2. 削除
4. すべてのメモとお気に入りのメモを切り替える
購入者ショー
1. 新しいプロジェクト
プロジェクトを保存するフォルダーを選択します。ここでは、Git Bush の実行ステートメントを使用します ($ 記号は Git Bush に付属しています)。同じプロジェクトの保存場所を選択します
3. プロジェクトの作成
コマンドラインに vue init webpack vuex-note と入力してプロジェクトを作成する設定をします
4.各設定は
vue init webpack vuex-note: webpack ビルド ツールを使用してビルドされた vue プロジェクトを初期化 (init) します。プロジェクト名は vuex-note です
。プロジェクトの説明: プロジェクトの説明
作者: 淡路
5. インストール後、プロンプトが表示されるので、指示に従いましょう
新しい vue ページ
7. プロジェクト構造
現在のプロジェクト構造は図に示すとおりです
プロジェクト構造
node_modules フォルダーには既存のモジュールが含まれていますが、その中に必要な Vuex はありません。信じられない場合は、自分で確認してください
。
package.json ファイルには、プロジェクトに含まれるファイル、プロジェクトの実行方法、その他の情報が記述されています
9. Vuex をインストールします
npm install vuex --save:- on と入力します。コマンドライン -save は、package.json にインストール情報を書き込むことです始めましょう
ゼロ、アイデア
アプリケーション全体は 3 つのコンポーネントに分割できます 分割1.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
2 の ID に注意してください。輸入するときに必要ですか? プロジェクトモジュールからエクスポートする場合、インポートする場合は ./ は必要ありませんが、自分で作成したコンポーネントからインポートする場合は ./ が必要です
2. abc から {aaa} をインポートする必要があるのはどのような場合ですか (これには導入が必要です)。中括弧の?必要ないのはいつですか?abcでエクスポートされた部分がexport aaaの場合
インポートがエクスポートデフォルトでエクスポートされた部分の場合、{}は付加されず、エイリアスを付けることができます3.プロジェクト構造にはストアフォルダーしかありません。「./store」からストアをインポートとはどういう意味ですか?
わかりません、アドバイスをくださいES6 の略称。この略語の前に store:store が付いているのは、Vuex をグローバルに注入することを意味し、グローバルに注入されていない場合は、this.$store を通じて呼び出すことができます。コンポーネントごとに個別に導入する必要があり、非常に面倒です
3. ストアの下のindex.js
1. Vue.use (Vuex) とはどういう意味ですか?
Vuexを使用する場合、今後Vue-routerを使用するときにこれを行う必要がありますが、これをルートフォルダーの下のindex.jsファイルに記述する必要があります2. +new Date()は何を意味しますか?
new Date().getTime() と同等のタイムスタンプの別の書き方3. 状態、ゲッター、ミューテーション、アクションの関係は何ですか?
state: 前述したように状態ウェアハウス
getter: 状態の変更、例えばstateにはstr: "abc"のような属性があり、多くのコンポーネントではstr + "def"の操作が必要となります。各コンポーネントで str + "def" 操作を実行するのは面倒なので、ゲッターに追加できます:
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/>' })将来的にはコンポーネントで strAdd を使用するだけで済みます
mutations: 簡単に言うと、Modify state、同期メソッドを定期的に呼び出します。$store.commit
actions: 簡単に言うと、Mutation を呼び出すために使用され、定期的に this を呼び出します。 $store.dispatch
4. ツール .vue
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.mapState、mapGetter、mapActions とは何ですか?
さらに、メソッドと Vuex アクションに同じ名前の属性 A がある場合、mapActions(['A' ] ) このメソッドは省略されています注: 1. 角括弧は省略できません。2. 角括弧は文字列です。3. 展開演算子... は省略できません
。書き方は次のとおりです。[ ] が {} になっていることに注意してください:
strAdd(){ return this.str + "abc" }
需要传入参数时,前提是 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 中国語 Web サイトの他の関連記事を参照してください。