uniappでvuexを使用してデータを保存する方法

uniapp で vuex を使用すると、コンポーネント間のデータ共有と管理がより便利かつ簡潔になります。 vuex にデータを保存する方法も、習得する必要がある重要なスキルです。 vuexを使ってuniappにデータを保存する方法を詳しく紹介します。

1. vuex で状態を定義する

vuex では、まずストアを定義する必要があります。ストアは、状態、突然変異、アクション、ゲッターなどを含むグローバルな状態マネージャーです。プロパティとメソッド。そして、状態はデータを節約するための鍵となります。

uniapp では、src ディレクトリの store フォルダーにindex.js ファイルを作成し、その中に状態を定義できます。例:

const state = {
  username: ''
}

ここでは、ユーザー名属性を含む状態オブジェクトを定義し、それを空の文字列に初期化します。このユーザー名は、vuex に保存したいデータです。

2. ミューテーションを使用して状態を変更する

次に、ミューテーションを定義する必要があります。ミューテーションでは、データの追加、データの変更、削除などのさまざまな操作を定義できます。データです。お待​​ちください。ここでは、データを状態に保存する方法を示すために、データの変更を例に挙げます。

src/store/index.js ファイルで、ミューテーション メソッドを次のように定義します。

const mutations = {
  setUsername (state, payload) {
    state.username = payload
  }
}

ここでは、state と payload の 2 つのパラメーターを受け取る setUsername メソッドを定義します。状態は前のステップで定義した状態オブジェクトであり、ペイロードは変更されたデータです。

setUsername メソッドは、状態オブジェクトのユーザー名属性を変更することで、データを状態に保存するという目的を達成します。

3. コンポーネントでの vuex の使用

vuex でデータを定義して保存したので、それをコンポーネントで使用する必要があります。

使用するコンポーネントでは、vuex を導入し、mapState などのメソッドを使用して状態のデータを取得し、コンポーネントで使用できるようにする必要があります。

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['username'])
  },
  mounted () {
    console.log(this.username) // 打印出保存在vuex中的数据
  }
}

ここでは、mapState メソッドを使用して vuex のデータをコンポーネントの計算されたプロパティにマップし、それにユーザー名としてエイリアスを与えます。これにより、コンポーネントで this.username を使用して、 vuexに保存されているデータ。

4. コンポーネントの vuex のデータを変更する

前のステップで、コンポーネントの vuex に保存されたデータを取得できました。次のステップは次のとおりです。データを処理するためのロジック。コンポーネント内の vuex でデータを変更する方法のロジック。

コンポーネントでは、this.$store.commit('mutations Method name', data) を通じて、ミューテーション内のメソッドを送信し、状態内のデータを変更できます。

methods: {
  modifyUsername () {
    this.$store.commit('setUsername', 'newUsername')
  }
}

ここでは、modifyUsername メソッドを定義します。コンポーネント内でこのメソッドを呼び出すと、this.$store.commit メソッドを通じて setUsername メソッドを送信し、新しいデータ newUsername を渡すことができます。このようにして、vuex に保存されているデータを変更することができます。

5. 概要

上記の手順を通じて、vuex を使用して uniapp でデータを保存および管理する方法を学習できます。手順はシンプルであり、実際には難しくありません。大規模または複雑なアプリケーションを作成する場合、vuex を使用すると、コードの保守性と可読性が向上し、開発プロセスもスピードアップします。

以上がuniappでvuexを使用してデータを保存する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。