【実践するVue2+3入門】 (18) VueのVuexステートマネージャーの概要、VueXのインストール、コアコンセプトの詳細説明ステートステートコードの実装

1. Vuexの概要

目標: Vuexとは何か、アプリケーションのシナリオと利点を明確にする

1.とは

Vuex は Vue の状態管理ツールであり、状態はデータです。

簡単に言うと: Vuex は、Vue の共通データ (複数のコンポーネントによって共有されるデータ) の管理に役立つプラグインです。例：ショッピングカートデータの個人情報番号

2.利用シーン

特定の状態が多くのコンポーネントで使用されている (個人情報)
複数のコンポーネントが共同して 1 つのデータを維持します (ショッピングカート)

ここに画像の説明を挿入します

3. 利点

1つのデータを共同で保持し、データを一元管理する
対応的な変更
簡単な操作（vuexはいくつかの補助機能を提供します）

ここに画像の説明を挿入します

4. 注:

公式テキスト:

すべてのシナリオが vuex に適しているわけではありません。必要な場合にのみ vuex を使用してください
vuex を使用すると、フレームワークにさらに多くの概念が追加され、プロジェクトの複雑さが増します (データ操作がより便利になり、データフローがより明確になります)。

Vuexは「近視メガネ」のようなもので、いつ使用する必要があるか自然にわかります~

2. 要件: 複数のコンポーネントがデータを共有する

目標: スキャフォールディングに基づいてプロジェクトを作成し、vuex マルチコンポーネントデータ共有環境を構築する

ここに画像の説明を挿入します

その結果、3 つのコンポーネントが 1 つのデータを共有します。

どのコンポーネントでもデータを変更できる
3 つのコンポーネントのデータは同期されます

1.プロジェクトの作成

vue create vuex-demo

2. 3つのコンポーネントを作成します。ディレクトリは次のとおりです。

|-components
|--Son1.vue
|--Son2.vue
|-App.vue

3. ソースコードは次のとおりです

App.vue2 つのサブコンポーネント Son1 と Son2 をエントリコンポーネントに導入します。

<template>
  <div id="app">
    <h1>根组件</h1>
    <input type="text">
    <Son1></Son1>
    <hr>
    <Son2></Son2>
  </div>
</template>

<script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'

export default {
      
      
  name: 'app',
  data: function () {
      
      
    return {
      
      

    }
  },
  components: {
      
      
    Son1,
    Son2
  }
}
</script>

<style>
#app {
      
      
  width: 600px;
  margin: 20px auto;
  border: 3px solid #ccc;
  border-radius: 3px;
  padding: 10px;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    
    
  render: h => h(App)
}).$mount('#app')

Son1.vue

<template>
  <div class="box">
    <h2>Son1 子组件</h2>
    从vuex中获取的值: <label></label>
    <br>
    <button>值 + 1</button>
  </div>
</template>

<script>
export default {
      
      
  name: 'Son1Com'
}
</script>

<style lang="css" scoped>
.box{
      
      
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
      
      
  margin-top: 10px;
}
</style>

Son2.vue

<template>
  <div class="box">
    <h2>Son2 子组件</h2>
    从vuex中获取的值:<label></label>
    <br />
    <button>值 - 1</button>
  </div>
</template>

<script>
export default {
      
      
  name: 'Son2Com'
}
</script>

<style lang="css" scoped>
.box {
      
      
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
      
      
  margin-top: 10px;
}
</style>

3. vuex-create ウェアハウスの使用

ここに画像の説明を挿入します

1.vuexをインストールする

vuex のインストールは vue-router と似ています。vuex は独立したプラグインです。スキャフォールディングの初期化に vuex が選択されていない場合は、追加のインストールが必要です。

yarn add vuex@3 或者 npm i vuex@3

`store/index.js`2. vuex を保存するためだけに新しいものを作成します

プロジェクトディレクトリをクリーンな状態に保つために、src ディレクトリの下に新しいストアディレクトリを作成し、その下にindex.js ファイルを配置します。（router/index.jsに似ている）

ここに画像の説明を挿入します

3. 倉庫を作成する`store/index.js`

// 导入 vue
import Vue from 'vue'
// 导入 vuex
import Vuex from 'vuex'
// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)

// 创建仓库 store
const store = new Vuex.Store()

// 导出仓库
export default store

4 main.js の Vue インスタンスにインポートしてマウントします

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
    
    
  render: h => h(App),
  store
}).$mount('#app')

これで空倉庫の作成に成功しました!!

5. Vuexのテスト印刷

app.vue

created(){
    
    
  console.log(this.$store)
}

4. コアコンセプト - 状態状態

1. 目標

ウェアハウスへのデータの提供方法とウェアハウス内のデータの利用方法を明確にする

2. データの提供

State は唯一のパブリックデータソースを提供し、すべての共有データはストアの State に保存される必要があります。

プロジェクトでstore.js ファイルを開き、共有するデータを状態オブジェクトに追加します。

// 创建仓库 store
const store = new Vuex.Store({
  // state 状态, 即数据, 类似于vue组件中的data,
  // 区别：
  // 1.data 是组件自己的数据, 
  // 2.state 中的数据整个vue项目的组件都能访问到
  state: {
    count: 101
  }
})

3. Vuex のデータにアクセスする

質問: コンポーネント内のカウントを取得するにはどうすればよいですか?

$store 経由で直接アクセス —> { { $store.state.count }}
ヘルパー関数mapStateを使用して計算されたプロパティをマップします —> { { count }}

4. $store経由でアクセスするための構文

获取 store：
 1.Vue模板中获取 this.$store
 2.js文件中获取 import 导入 store


模板中：     {
    
    {
    
     $store.state.xxx }}
组件逻辑中：  this.$store.state.xxx
JS模块中：   store.state.xxx

5. コードの実装

5.1 テンプレートでの使用

次のように、コンポーネントで$store を使用してvuex のストアオブジェクトインスタンスを取得でき、state属性を通じてカウントを取得できます。

<h1>state的数据 - {
   
   { $store.state.count }}</h1>

5.2 コンポーネントロジックで使用される

計算された属性で状態属性を定義 https://vuex.vuejs.org/zh/guide/state.html

<h1>state的数据 - {
    
    {
    
     count }}</h1>

// 把state中数据，定义在组件内的计算属性中
  computed: {
    
    
    count () {
    
    
      return this.$store.state.count
    }
  }

5.3 js ファイルで使用される

//main.js

import store from "@/store"

console.log(store.state.count)

このように毎回計算されたプロパティを 1 つずつ指定するのは非常に面倒なので、状態の値を取得するための簡単な構文はありますか?