Vue-buex Vuex 開発環境を構築する

1 Vuexをインストールする

インストールする前に、バージョンの問題を理解する必要があります。vue2 では、vuex のバージョン 3 を使用する必要があります。vue3 では、vuex のバージョン 4 を使用する必要があります。このバージョンの要件に厳密に従う必要があります。そうしないと、さまざまな問題が発生します。バージョンの問題によるものであっても、次のようなインストールエラーなどの予期しない問題が発生する

インストール方法はいくつかありますが、ここではnpmインストールを使用します。

npm

npm install vuex@next --save

糸

yarn add vuex@next --save

ここでは vue2 を使用しているので、vuex のバージョン 3 をインストールし、ターミナルを開いて次のように入力しました。

vue_test>npm i vuex@3

2 Vuex の使用

インストールが完了したら、インポートして使用します。ここで、Vuex の v は大文字でも小文字でも構いません。公式 Web サイトのドキュメントは大文字です。小文字にしなければならないのは間違いではありません。単なる命名の問題です。

// 引入Vuex
import Vuex from 'vuex'
// 使用Vuex
Vue.use(Vuex)

3 仮想ストアを使用する

Vuex を使用する手順の後、vm または vc を作成するときにストア構成アイテムを渡すことができます。

このように、各 vc インスタンスにはストアオブジェクトがありますが、現在のストアの値はすべて false なので、実際のストアを作成 (カプセル化) する必要があります。

4 ストアを作成する

ストアを作成するには2つの方法があります

最初のアプローチ

プロジェクトの src ディレクトリに vuex というフォルダーを作成し、その中に新しい store.js を作成すると、vuex テクノロジーが使用されていることが一目でわかり、ここにストアが作成されます。は明らかですが、公式に推奨されていません

2 番目のアプローチ

プロジェクトのsrcディレクトリにstoreというフォルダを作成し、index.jsを作成する vuexは反映されませんが、srcにstoreが表示されるのはvuexが表示されるのと同等ですこの方法は公式サイトでも推奨されています

どちらの方法でも大丈夫ですが、公式サイトでは2番目のシード方法を推奨しているので、ここでは2番目の方法を使用します。

5 ストアを公開（エクスポート）する

関連するコードをindex.jsに記述します。

// 该文件用于创建Vuex中最为核心的store

// 引入Vuex
import Vuex from 'vuex'

// 准备actions 用于相应组件中的动作
const actions={}
// 准备mutations 用于操作数据(state)
const mutations={}
// 准备state 用于存储数据
const state={}
// 创建并暴露(导出)store 
export default new Vuex.Store({
    // 准备store里面的三大元素 这里key和value重名,可以使用简写形式 比如:action,mutations,state 这里我不想采用简写形式
    actions:actions,
    mutations:mutations,
    state:state
})

6 実店舗の導入・利用

実店舗の準備ができたので、実店舗を導入して、上で書いた偽店舗を置き換えることができます

ここではストアが略語をトリガーしますが、省略したわけではありません。個人的にはこの略語に慣れていません

このような実ストアは作成、構成、参照され、vc または vm インスタンス上にストアオブジェクトが存在します。

7 インポートステートメントのスキャフォールディング解析の問題を解決する

基本的な作業はできているように見えますが、ブラウザがエラーを報告するため、前後の呼び出しの問題のように見えますが、実際には import 文のスキャフォールディング解析の問題です。

 [vuex] must call Vue.use(Vuex) before creating a store instance.

この時点で、考え方を変えて、index.js に use を記述して、main.js はストアをインポートして準備するだけで済みます。

この時点で、ストアを再度確認し、エラーメッセージを見つけて、各 vc または vm に実際のストアがあることを確認してください。

また、ディスパッチやコミットなどの関連 API も参照してください。これは、vuex で操作できることを意味します。

この時点で Vuex の開発環境が完成し、vuex を使用できるようになります。

インデックス.js

// 该文件用于创建Vuex中最为核心的store

// 引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用Vuex
Vue.use(Vuex)
// 准备actions 用于相应组件中的动作
const actions={}
// 准备mutations 用于操作数据(state)
const mutations={}
// 准备state 用于存储数据
const state={
    sum:0 //总和
}
// 创建并暴露(导出)store 
export default new Vuex.Store({
    // 准备store里面的三大元素 这里key和value重名,可以使用简写形式 比如:action,mutations,state 这里我不想采用简写形式
    actions:actions,
    mutations:mutations,
    state:state
})

メイン.js

// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 引入store
import store from './store/index'
// 关闭Vue的生产提示
Vue.config.productionTip=false
// 创建vm 
const vm=new Vue({
    el:'#app',
    render:h=>h(App),
    store:store,
    beforeCreate(){
        Vue.prototype.$bus=this
    }
   
})

8 vuex環境構築の概要

1 ファイルを作成します。src/store/index.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
        actions,
        mutations,
        state
})

2 main.jsVM を作成するときにstore構成アイテムを渡します。

......
//引入store
import store from './store'
......

//创建vm
new Vue({
        el:'#app',
        render: h => h(App),
        store
})