Vuex の紹介
1: 基本的な使い方
-
インスタンス化された新しいオブジェクトを作成する
const store = new Store.Vuex({}) -
state => は data state: { name: 'xxx' } call form: this.$store.state.xxxと同等です -
getters => 計算された
getters:{ contactName(state){ xxx } }呼び出しフォームと同等: this.$store.getters.xxxはデフォルトで state に渡されます
-
Mutations => メソッドと同等の
Mutations: { changeName(state,[params]){ xxx } }呼び出し形式: this.$store.commit('functionName',params) state はデフォルトで渡される最初のパラメータで、次に渡す必要があるデータ
-
actions => メソッドと同等です
action: { changeNameAsync(context,[params]){ xxx } } call form: this.$store.dispatch(functionName,params) context はデフォルトで渡され、 new Store.Vuex() がインスタンス化されますオブジェクトと同じデータとメソッド
-
ミューテーションとアクションの違い
ミューテーションとアクションはどちらも状態のデータを操作できます. 唯一の違いは、ミューテーションでは
setTimeOut や setInterval などの非同期操作を実行できないことです. これらの非同期操作はアクションでのみ実行できます. -
モジュールモジュール化
const ModuleA = {
namespaced: true,
state:{
},
getters:{
},
mutations:{
},
actions:{
},
}
const ModuleB = {
namespaced: true,
state:{
},
getters:{
},
mutations:{
},
actions:{
},
}
const store = nre Store.Vuex({
modules:{
//形式一 调用store.state.a/b
a:moduleA,
b:moduleB,
//形式二 调用store.state.moduleA/moduleB
mudlueA,moduleB
}
})
2: 補助機能の使用
-
import {mapState, mapGetters, mapMutations, mapActions} from 'Vuex' を導入します
ここで、Vuex の大文字と小文字が main.js がインポートされたときと同じになるように注意する必要があります。そうしないと、警告が表示されます -
使用
法 The helper function is the grammatical sugar of the official provided state. より多くの状態値を導入する場合、この関数を使用して、宣言状態
とゲッターを計算結果に単純化し、ミューテーションとアクションをメソッドにマップしてマップすることができます
//默认形式的Vuex维护
data(){
return{
// 如果需要引入的state太多的话 就需要写很多重复的代码
name:this.$store.state.name,
age:this.$store.state.age,
sex:this.$stroe.ModuleA.sex,
height:this.$store.ModuleB.height,
mergeName:this.$store.getters.mergeName,
}
}
補助関数の 4 つの形式 (/mapState を例に取ると、他の補助関数は基本的に同様です)
// 形式一 mapState传入的参数为对象
computed:mapState({
// 原来的计算属性保留
fn1(){
return xxx}
fn2(){
return xxx}
fn3(){
return xxx}
// 维护Vuex的内容
// 箭头函数的形式 this指向new Store.Vuex()的实例化对象 store
name:state => state.name,
// 键名和state的值名称一致
age:'age',
// 正常函数定义的形式 需要使用Vue实例化对象中data的数据时必须使用该形式
sex(state){
return this.tips + state.sex
}
})
// 形式二 mapState传入的参数是数组
computed:mapState([
'name', //映射 this.name = this.$store.state.name
'age',
'sex',
// 此形式要求映射的computed的名称 和 state中属性的名称一致
])
// 形式三 使用...拓展运算符
computed:{
//原本的计算属性保留
mergeStr(){
xxx}
//维护Vuex 此形式将mapState函数返回的对象和原本的内容合并在一起
...mapState({
xxx})
// 也可以使用...mapState([xxx])的形式 但是在之前的基础上多了一个条件 state的值不能存放在module中
}
// 形式四 ...配合module
computed:{
// mapState等辅助函数 第一个参数可以指定module中的模块名称
// 第二个参数 在进行对应的映射操作
...mapGetters('footerStatus', {
isShow: 'isShow',
})
...mapGetters('collection', {
allList: 'renderCollects'
})
}