1つは、Vuexの依存関係をインストールする
cnpm install vuex --save
2.パッケージストアを段階的に
1. main.jsにストアウェアハウスをグローバルにインポートします（次のステップを作成します）
import store from './store' //引入store
new Vue({
el: '#app',
router,
store, //挂载store，this将自动生成$store属性
template: '<App/>',
components: {
App }
})
ストアをマウントします。これにより、$ store属性が自動的に生成されます。
2.this。$ store
ストアウェアハウスの作成：srcの下にストアフォルダーを作成してから、次のコンテンツであるindex.jsを作成するのが通例です。
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store();
export default store;
この時点で、機能のない空のストアグローバルウェアハウスがすでにありますが、任意のvueインスタンスの下で使用する this。$ store それを訪問してください。
- ストアの使用範囲はグローバルに使用できます。
let a=1; {a:a}.a 的缩写是 {a}.a,即当字典的键和值命名一样时，可以省略只写a- 状態、ゲッター、ミューテーション、ミューテーションはすべてVuexによってカプセル化された特別な変数です。以下で宣言されている関数変数はすべてこれらの名前です。1つの利点は、関数をマウントするときにストアを省略できることです（この例では3-1など）。もちろん、ストアで直接関数を作成することもできます（3-2など）。
3.this。$ store.state
店舗倉庫のデータ読み取り機能：状態
/********* 3-1 **********/
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state={
//要设置的全局访问的state对象,赋予初始属性值
themeColor: {
val:'blue',opacity:false},
changeThemeCount:0,
cache:''
};
const store = new Vuex.Store({
state
});
export default store;
この時点で、ストアにはデータにアクセスする機能があり、次を使用できます。 this。$ store.state.themeColorデータを待ちます。
以下は2番目の書き方です
/********* 3-2 **********/
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state:{
//要设置的全局访问的state对象,赋予初始属性值
themeColor: {
val:'blue',opacity:false},
changeThemeCount:0,
cache:''
}
});
export default store;
4.this。$ store.getters（this。$ store.stateのアップグレード）
状態関数をアップグレードして、計算能力を持たせます（vueの計算された方法と同様）：getters：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state={
//要设置的全局访问的state对象,赋予初始属性值
themeColor: {
val:'blue',opacity:false},
changeThemeCount:0,
cache:''
};
const getters = {
//实时监听state值的变化(最新状态)
getThemeColor(state) {
//定义函数，返回处理过的val，命名最好有代表性
let hour = new Date().getHours();
// 如果白天则主题色不透明，反之
state.themeColor.opacity = 8 <= hour && hour <= 20;
return state.themeColor
}
};
const store = new Vuex.Store({
state, // 挂载存取数据功能
getters //挂载数据计算功能
});
export default store;
この時に使用します this。$ store.getters.getThemeColor 色を取得し、テーマが時間に応じて透明効果を持っているかどうかを自動的に設定します
5.this。$ store.commit（ 'mutations'）
ストアウェアハウスの関数関数を使用します（状態データの操作のみ）：mutations-synchronization
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state={
//要设置的全局访问的state对象,赋予初始属性值
themeColor: {
val:'blue',opacity:false},
changeThemeCount:0,
cache:''
};
const getters = {
//实时监听state值的变化(最新状态)
getThemeColor(state) {
//定义函数，返回处理过的val，命名最好有代表性
let hour = new Date().getHours();
// 如果白天则主题色不透明，反之
state.themeColor.opacity = 8 <= hour && hour <= 20;
return state.themeColor
}
};
const mutations = {
//自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);
clearCatch(state) {
state.cache = "";
state.changeThemeCount= 0;
},
setThemeColor(state,color,opacity){
state.themeColor.val = color;
state.themeColor.opacity = opacity;
state.changeThemeCount++;
}
};
const store = new Vuex.Store({
state, // 挂载存取数据功能
getters, //挂载数据计算功能
mutations // 挂载函数功能
});
export default store;
使用できます this。$ store.commit（ 'setThemeColor'、 'grey'、 '1'）（最初のパラメーターは関数名であり、状態に渡されるパラメーターではなく、状態自体が渡され、後の2つは対応するパラメーターであることに注意してください）。テーマの色と透明度をアクティブに設定でき、操作は同期的です。つまり、同じコンポーネントでsetThemeColor関数を複数回呼び出すと、ウェアハウスのstate.changeThemeCountの値は同じになります。非同期関数を以下に紹介します。
6.this。$ store.dispatch（ 'actions'）（これのアップグレード。$ store.commit（ 'mutations'））
ストアウェアハウスの関数コミット関数をアップグレードします（非同期操作ミューテーションの関数のみ）：actions-asynchronous
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state={
//要设置的全局访问的state对象,赋予初始属性值
themeColor: {
val:'blue',opacity:false},
changeThemeCount:0,
cache:''
};
const getters = {
//实时监听state值的变化(最新状态)
getThemeColor(state) {
//定义函数，返回处理过的val，命名最好有代表性
let hour = new Date().getHours();
// 如果白天则主题色不透明，反之
state.themeColor.opacity = 8 <= hour && hour <= 20;
return state.themeColor
}
};
const mutations = {
//自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);
clearCatch(state) {
state.cache = "";
state.changeThemeCount= 0;
},
setThemeColor(state,color,opacity){
state.themeColor.val = color;
state.themeColor.opacity = opacity;
state.changeThemeCount++;
}
};
const actions = {
//自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性
setThemeColorAction(context,color,opacity){
context.commit('setThemeColor',color,opacity);
}
};
const store = new Vuex.Store({
state, // 挂载存取数据功能
getters, //挂载数据计算功能
mutations, // 挂载函数功能
actions， // 挂载异步函数
});
export default store;
使用できます this。$ store.dispatch（ 'setThemeColorAction'、 'grey'、 '1'）（最初のパラメーターは関数名であり、コンテキストに渡されるパラメーターではなく、コンテキスト自体が渡され、後の2つは対応するパラメーターであることに注意してください）。テーマの色と透明度をアクティブに設定できます。操作は非同期です。つまり、同じコンポーネントでsetThemeColorAction関数を複数回呼び出すと、ウェアハウスのstate.changeThemeCountの値は同じになりません。
3つのモジュールモジュール
2番目のモジュールでは、ストアリポジトリの4つの機能（状態、ゲッター、ミューテーション、アクション）を紹介し、5番目の機能を以下に紹介します：モジュール。
- プロジェクトが比較的大きい場合、ストア内のデータは非常に大きく複雑になり、管理が容易ではありません。現時点では、さまざまなモジュールに対応するデータを読み取って操作するために、複数の「サブウェアハウス」を構築できます。
- メインウェアハウスはまだその1つであることに注意してください。メインウェアハウスのモジュールの下に、彼の「サブリポジトリ」を配置するだけです。
- サブリポジトリは倉庫によく似ています。実際、これはストアのインスタンスではなく、倉庫（新しいVuex.Store（）のインスタンス化後のオブジェクトは倉庫です）ではなく、通常のjsオブジェクト（辞書）です。
1. storeの下に新しいmodulesフォルダーを作成し、modulesの下に新しいhome.js「sub-repository」を作成します。
つまり、home.jsはホームページの下のデータのみを考慮します（通常、あまり分割しないでください。多くても1つのページと1つのウェアハウスが簡潔です）。以下はhome.jsコードです。
//home.js
const state={
users:[] //存访问该页面的所有用户
};
const getters={
getUsers(state){
//获取访问该页面的所有用户
// 对数据清理-除去脏数据
if (state.users.includes('*')) delete state.users['*']
return state.users;
}
};
const mutations={
addUser(state,name){
//增加访问用户
state.collects.push(name)
}
};
const actions={
invokeAddUser(context,name){
//触发mutations里面的addUser,传入数据形参name对应到users
context.commit('addUser',name);
}
};
// 注意和仓库的区别
const store = {
// namespaced用于在全局引用此文件里的方法时标识这一个的文件名，使得让人明白这些数据来自哪个仓库
// 即当你需要在别的文件里面使用子仓库(mapStates、mapGetters、mapActions)时，里面的方法需要注明来自哪一个模块的方法
namespaced:true,
state,
getters,
mutations,
actions
}
export default store;
2.「サブリポジトリ」が作成され、メインウェアハウスはそれを参照する必要があります。
import Vue from 'vue';
import Vuex from 'vuex';
import home from './modules/home.js'
Vue.use(Vuex);
const state={
//要设置的全局访问的state对象,赋予初始属性值
themeColor: {
val:'blue',opacity:false},
changeThemeCount:0,
cache:''
};
const getters = {
//实时监听state值的变化(最新状态)
getThemeColor(state) {
//定义函数，返回处理过的val，命名最好有代表性
let hour = new Date().getHours();
// 如果白天则主题色不透明，反之
state.themeColor.opacity = 8 <= hour && hour <= 20;
return state.themeColor
}
};
const mutations = {
//自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);
clearCatch(state) {
state.cache = "";
state.changeThemeCount= 0;
},
setThemeColor(state,color,opacity){
state.themeColor.val = color;
state.themeColor.opacity = opacity;
state.changeThemeCount++;
}
};
const actions = {
//自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性
setThemeColorAction(context,color,opacity){
context.commit('setThemeColor',color,opacity);
}
};
const store = new Vuex.Store({
state, // 挂载存取数据功能
getters, //挂载数据计算功能
mutations, // 挂载函数功能
actions， // 挂载异步函数
modules:{
// 挂载子仓库
home
}
});
export default store;
今、最初の「サブウェアハウス」があります！
第四に、倉庫を使用します
1.マップシリーズなし
少数のユース
ケースに適しています：ウェアハウスを構築し、コンポーネントで状態、ゲッター、ミューテーション、およびアクションを直接使用します。
- this。$ store.state。*
- this。$ store.getters。*
- this。$ store.commit。*
- this。$ store.dispatch。*
2.マップマッピングシリーズ
頻繁に使用するシナリオに適しています
。1。mapGetters、mapActions、およびmapStatesを使用する前にインポートが必要です。
import {
mapState,mapGetters,mapActions} from 'vuex';
2.ES6の新しい構文を使用します-ハイパーリファレンス、使用する特定の関数の下にあるすべてのデータまたはメソッドをマップします。以下は、mapState、mapGetters、およびmapActionsの例です。
//这里的...是超引用，映射内容，可以写在computed下、methods下等（一般放在开头）
// 直接从库中取值 - 将库里的users值返回给字典中的users并映射给this组件
...mapState({
users:state=>state.home.users
}),
// 使用计算属性 - 将库里的users计算后的值返回给字典中的users并映射给this组件
...mapGetters('home',{
users:'getUsers' //获取清理后的数据
//由于home仓库 namespaced:true,所以第一个参数作为标识
// 不使用标识访问的是主仓库
})
// 使用异步函数 - 以数组中的函数名，从库中对应的函数映射给this组件以供使用
...mapActions('home',['invokeAddUser'])
// 有某个组件 <span @click='invokeAddUser(name)'></span>
// 或者直接使用 this.invokeAddUser(name)
3.拡張
1、mapState映射的三种写法
computed: mapState({
// 箭头函数可使代码更简练
count: state => state.count,
// 传字符串参数 'count' 等同于 `state => state.count`
countAlias: 'count',
// 为了能够使用 `this` 获取局部状态，必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
})
2、当映射的计算属性的名称与state的子节点名称相同时，
我们也可以给 mapState传一个字符串数组。
computed: mapState([ // 数组
"count"
])
3、仓库中action的第二种接收参数
const actions = {
//自定义触发mutations里函数的方法，{commit}与store 实例具有相同方法和属性
setThemeColorAction({
commit},color,opacity){
commit('setThemeColor',color,opacity);
}
};
3.まとめ
1. Vuexは、Vue.jsアプリケーション用に特別に設計された一元化された状態管理アーキテクチャです。FluxとReduxの設計アイデアを利用しますが、概念を単純化し、Vue.jsデータ応答メカニズムをより適切に使用するために特別に設計された実装を採用しています。
2. Vuexの4つのコアコンセプトは次のとおりです
。状態ツリー：Vuexは単一の状態ツリーを使用し、1つのオブジェクトにはすべてのアプリケーションレベルの状態が含まれます。これまでのところ、「単一データソース（SSOT）」として存在します。これは、各アプリケーションに1つのストアインスタンスのみが含まれることも意味します。単一状態ツリーを使用すると、特定の状態セグメントを直接見つけて、デバッグ中に現在のアプリケーション状態全体のスナップショットを簡単に取得できます。
ゲッター：ストアからVueコンポーネントデータを取得するために使用されます。
ミューテーター：イベントハンドラーは、状態の変化を促進するために使用されます。
アクション：コンポーネントがイベントハンドラーの突然変異を駆動するために使用できる関数
3. Vuexアプリケーションでのデータの流れ（Vuex公式マップ）
- データフローは一方向です
- コンポーネントはアクションを呼び出すことができます
- アクションは突然変異をディスパッチするために使用されます
- 突然変異だけが状態を変えることができます
- ストアは応答性が高く、状態がいつ更新されても、コンポーネントは同期的に更新されます
参考文献：
かどうかを考える-飛躍しているかどうかを
考える