Vuex を使用してメモを取るアプリケーションを実装する方法-jsチュートリアル-php.cn

この記事では、Vuex を使用してメモ作成アプリケーションを実装する方法を主に紹介しますので、参考にしてください。

私は最近 Vue を学び始めました。最初に公式ドキュメントをざっと読んでから、公式ドキュメントにデモをいくつか打ち込みましたが、まだよく理解できません。入門レベルのノート作成アプリケーションをインターネットで見つけました。入門レベルのアプリケーションであっても、それでも習得するのは難しいです。このノートは、将来的に復習できるように特別に作成しました。また、Vue を学習し始めたばかりの女性の学生に役立つことを願っています

目的

このノートには、次の基本的な機能があります
1。 . 追加
2. 削除
4. すべてのメモとお気に入りのメモを切り替える

購入者ショー

1. 新しいプロジェクト

プロジェクトを保存するフォルダーを選択します。ここでは、Git Bush の実行ステートメントを使用します ($ 記号は Git Bush に付属しています)。同じ

プロジェクトの保存場所を選択します

2. モジュールを表示します (好むと好まざるにかかわらず)

グローバルにインストールされているモジュールを表示します。 modules

3. プロジェクトの作成

コマンドラインに vue init webpack vuex-note と入力してプロジェクトを作成する設定をします

これは一体何なのか

4.各設定は

vue init webpack vuex-note: webpack ビルドツールを使用してビルドされた vue プロジェクトを初期化 (init) します。プロジェクト名は vuex-note です

プロジェクト名: プロジェクト名

。プロジェクトの説明: プロジェクトの説明

作者: 淡路

Vue ビルド: ビルド方法は、独立ビルドとランタイムビルドに分かれています。具体的な手順については、次のリンクを参照してください。ここでは、独立ビルドスタンドアロンを選択します。 vuejs.org/v2/guide/installation.html #Runtime-Compiler-vs-Runtime-only
vue-routerのインストールは必要ですか？のページにジャンプします。ここでは必要ありません。後で学習します
ESLint を使用してコードをリントする : ESLint の仕様と使用方法 ESLint を使用すると、エラーが発生する可能性があります。 n
を選択し、残りはテスト用です。プロジェクトの作成後に「npm install」を実行する必要があります: 関連する依存関係を直接インストールする必要がある場合(npm install)。 Enter キーを押すだけで、さまざまなものがインストールされます
5. インストール後、プロンプトが表示されるので、指示に従いましょう
まず、cd vuex-note を実行して vue プロジェクトフォルダーに入ります。作成された
インストールが完了しました。その後、NPM RunDev
フォローアップ操作を介してプロジェクトを実行します。6。ページにアクセスして、この時点でLocalHostにアクセスしてください:8080 ブラウザ経由で新しい vue ページを開きます

新しい vue ページ

7. プロジェクト構造

現在のプロジェクト構造は図に示すとおりです

プロジェクト構造

初心者なので、まずは何か考えるために、ごちゃごちゃした設定はとりあえず無視して、今回に関係するものだけをピックアップしてみます(実際多すぎます) どちらも勉強になりませんでした...)

8. Vuex を確認する

Vuex を使用してメモを取るアプリケーションを実装しているため、最初にビルドされたプロジェクトに Vuex モジュールが含まれているかどうかを確認する必要があります。

node_modules フォルダーには既存のモジュールが含まれていますが、その中に必要な Vuex はありません。信じられない場合は、自分で確認してください

。

package.json ファイルには、プロジェクトに含まれるファイル、プロジェクトの実行方法、その他の情報が記述されています

package.json

9. Vuex をインストールします

npm install vuex --save:- on と入力します。コマンドライン -save は、package.json にインストール情報を書き込むことです

Vuex がインストールされました

この時点で、事前作業はすべて完了しており、不足している部分を 1 つずつ説明します実装プロセス中

始めましょう

ゼロ、アイデア

アプリケーション全体は 3 つのコンポーネントに分割できます

分割

各メモには番号 (ID)、タイトル (タイトル）、コンテンツ（content）、お気に入り（fav）になっているかどうかの 4 種類の情報
Vuex の状態には、すべてのノート（メモ）を保存する場所が必要です
そして、収集と削除の操作のみが可能です現在のノートを操作するため、識別子も必要です現在のノート (activeNote) を記録するために使用されます。
には、all と collection の 2 つの切り替えメソッドが含まれています。そのため、それを区別するためのロゴが必要です。それを show と呼びましょう、all はすべてを表し、fav はコレクションを表します
Component ==>actions.js ==>mutations.js = > コンポーネントを介してアクション (ディスパッチ) でメソッドを呼び出します。アクションでメソッドを介して(コミット)、ミューテーションでミューテーションでメソッドを呼び出す状態でノート一覧(notes)や現在のノート(activeNote)などを操作するメソッド

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」からストアをインポートとはどういう意味ですか?

わかりません、アドバイスをください

4. 新しい Vue の別のストアとは何を意味しますか?

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 &#39;vue&#39;
import App from &#39;./App&#39;
import store from &#39;./store&#39;     

Vue.config.productionTip = false

new Vue({
 el: &#39;#app&#39;,
 store,        
 components: { App },
 template: &#39;<App/>&#39;
})

ログイン後にコピー

将来的にはコンポーネントで strAdd を使用するだけで済みます

mutations: 簡単に言うと、Modify state、同期メソッドを定期的に呼び出します。$store.commit

actions: 簡単に言うと、Mutation を呼び出すために使用され、定期的に this を呼び出します。 $store.dispatch

4. ツール .vue

import Vue from &#39;vue&#39;
import Vuex from &#39;vuex&#39;
import getters from &#39;./getters&#39;
import mutations from &#39;./mutations&#39;
import actions from &#39;./actions&#39;

Vue.use(Vuex)    

const defaultNote = {
  id: +new Date(),    
  title: &#39;新建笔记&#39; + new Date().getMilliseconds(),    // 加时间是为了做一下区分
  content: &#39;笔记内容&#39;,
  fav: false
}

// 可以理解为一个状态的仓库  
const state = {
  notes: [defaultNote],      // 以数组方式存放所有的笔记
  activeNote: defaultNote,    // 用来记录当前笔记  
  show: &#39;all&#39;           // 用于切换 全部 / 已收藏 两种不同列表的标识
}

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

ログイン後にコピー

1.mapState、mapGetter、mapActions とは何ですか?
ここに非常に良い説明があります http://www.imooc.com/article/14741

さらに、メソッドと Vuex アクションに同じ名前の属性 A がある場合、mapActions(['A' ] ) このメソッドは省略されています注: 1. 角括弧は省略できません。2. 角括弧は文字列です。3. 展開演算子... は省略できません

。書き方は次のとおりです。[ ] が {} になっていることに注意してください:

strAdd(){
  return this.str + "abc"
}

ログイン後にコピー

需要传入参数时，前提是 actions 中的属性（方法）能接收参数：

methods:{
 ...mapActions([&#39;abc&#39;])
 // 自定义一个方法，通过触发这个方法调用之前重名的方法并传入参数
 tragger_abc(参数){
  this.abc(参数)
 }
}

ログイン後にコピー

2.scoped

对当前组件生效的 CSS

3.calc

使用时记得在运算符前后各加一个空格

五、list.vue

<template>
  <p id="list">
    <p class="switch">
      <button class="all" @click=&#39;get_switch_note("all")&#39;>全部</button><button class="fav" @click=&#39;get_switch_note("fav")&#39;>已收藏</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=&#39;get_select_note(note)&#39;>
        <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 &#39;vuex&#39;
  export default {
    name: &#39;list&#39;,
    data: function() {
      return {
        search: "" 
      }
    },
    computed: {
      ...mapState([&#39;notes&#39;, &#39;activeNote&#39;]),
      ...mapGetters([&#39;filteredNote&#39;]),
      // 二次过滤：在当前列表(全部 或 已收藏)中进行筛选,返回值被用在组件的 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([&#39;select_note&#39;, &#39;switch_note&#39;]), 
      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 &#39;vuex&#39;
  export default {
    name: &#39;edit&#39;,
    computed:{
      ...mapState([&#39;activeNote&#39;])   // 当本组件中 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(&#39;ADD_NOTE&#39;)
  },
  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([&#39;add_note&#39;,&#39;del_note&#39;,&#39;fav_note&#39;])

ログイン後にコピー

而 actions.js 中的 add_note 去调用 mutations.js 中写好的 ADD_NOTE 方法，而实际的添加操作也是在 ADD_NOTE 中，组件也好，actions 也好，最终只是调用 ADD_NOTE 。之所以这么做是因为 mutations 中的方法都是同步的，而 actions 中的方法是异步的，不过在本例里没啥区别

八、getters.js

export default {
  filteredNote: (state) => {
    if(state.show === &#39;all&#39;) {
      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 &#39;./mutation-types&#39;

export default {
  [ADD_NOTE](state, note = {
    id: +new Date(),
    title: &#39;新建笔记&#39; + new Date().getMilliseconds(),
    content: &#39;笔记内容&#39;,
    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 中的函数常量就是这里抛出的，查资料说是这么做便于一目了然都有那些方法。

上面是我整理给大家的，希望今后会对大家有帮助。

分析javascript原型及原型链

jQuery中each方法的使用详解

jquery 实现拖动文件上传加载进度条功能

以上がVuex を使用してメモを取るアプリケーションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。