vuex 深層学習モジュール
記事ディレクトリ
序文
首先，回顾一下vuex的核心概念(个人理解,方便记忆理解)：
- 状態: 共有データ
- 突然変異: 同期操作、状態データを変更する唯一の方法 最初の仮パラメータは状態データで、2 番目の仮パラメータは外部から渡されるデータです。
- アクション: 変更を保存します。非同期操作の最初のパラメーターはコンテキスト オブジェクトを表し、2 番目のパラメーターは外部から受信するデータを表します。
- getters: 計算された属性と同様、変更は許可されず、状態データはパッケージ化されて処理されます。
- モジュール: モジュール化 (つまり、今日私たちが学んでいること)
提示：以下是本篇文章正文内容，下面案例可供参考
1. モジュールとは何ですか?
- 公式導入: モジュールを使用すると、各モジュールが独自の状態、ミューテーション、アクション、ゲッターを持つことができるため、構造が非常に明確になり、管理が容易になります。すべての状態やメソッドがストア内に記述されると、非常に肥大化して管理が困難になります。を維持します。
- 個人的な理解：ステータス管理を明確にし、保守しやすくするため、比較的複雑で大規模なプロジェクトに適しています。相互に影響を与えることなく、独自の状態、ミューテーション、アクション、ゲッター、モジュールを持つことができます。
这个图很重要 一定要记住哟!!!
2. モジュール化を実現する方法
1.作成
modules里面的state可以是函数，可以拥有这些自己的state、mutation、action、getters、modules
export default new Vuex.Store({
state: {
},
getters:{
},
mutations: {
},
actions: {
},
modules: {
模块名1:{
state:()=>({
}),
getters:{
},
mutations:{
},
actions:{
},
modules:{
}
},
模块名2:{
state:()=>({
}),
getters:{
},
mutations:{
},
actions:{
},
modules:{
}
}
}
})
这样写全部都在store/index.js里面难以维护，所以进行文件的抽离
模块1.js
export default ({
state: {
},
getters:{
},
mutations: {
},
actions: {
},
modules:{
}
}
})
index.js 中导入模块
import 模块1 from './modules/模块1';
import 模块2 from './modules/模块2';
export default new Vuex.Store({
state: {
},
getters:{
},
mutations: {
},
actions: {
},
modules: {
模块名1,
模块名2
}
})
2. モジュールデータを取得し、モジュールメソッドを呼び出す
2.1 モジュールの状態
方法1:{
{
$store.state.模块名.属性名 }}
方法2:import {
mapState } from 'vuex';
computed:{
// 注意：对象写法
...mapState({
属性名:state=>state.模块名.属性名
})
}
2.2 モジュールゲッター
方法1:{
{
$store.getters.属性名 }}
方法2:import {
mapGetters } from 'vuex'
computed:{
...mapGetters(['属性名'])
}
2.3 モジュールの突然変異
方法1:$store.commit('方法名',实参)
方法2:import {
mapMutations } from 'vuex'
methods:{
...mapMutations(['方法名'])
}
2.4 モジュールのアクション
方法1:$store.dispatch('方法名',实参)
方法2:import {
mapActions} from 'vuex'
methods:{
...mapActions(['方法名'])
}
これを学習した後、状態モジュールの違いを除けば、他の取得と出発には違いがないことに気づきましたか。
如果模块化下的属性名和方法名,与根模块下的重复则会出现问题报错之类的,所以我们使用 命名空间来实现具体的模块化操作
3. ネームスペースを有効にする (ネームスペースあり)
export default ({
state: {
},
getters:{
},
mutations: {
},
actions: {
},
modules:{
},
namespaced:true // 默认为false
}
})
在获取模块数据 调用模块方法的时候 一定要注意是哪个模块下面的属性名称
3.1 名前空間下の状態
方法1:{
{
$store.state.模块名.属性名 }}
方法2:import {
mapState } from 'vuex';
computed:{
// 注意：对象写法
...mapState({
属性名:state=>state.模块名.属性名
})
}
3.2 名前空間の下のゲッター
方法1:{
{
$store.getters['模块名/属性名'] }}
方法2:import {
mapGetters } from 'vuex'
computed:{
...mapGetters({
属性名:'模块名/属性名'
})
}
3.3 名前空間での突然変異
方法1:$store.commit('模块名/方法名',实参)
方法2:import {
mapMutations } from 'vuex'
methods:{
...mapMutations({
方法名:'模块名/方法名'
})
}
3.4 名前空間でのアクション
方法1:$store.dispatch('模块名/方法名',实参)
方法2:import {
mapActions} from 'vuex'
methods:{
...mapActions({
模块名/方法名:'模块名/方法名'
})
}
3. 発生した問題点の共有
学到这,有没有觉得 这样记忆很麻烦 又有 单页面的状态管理的写法 又有多页面的写法 又分开启命名空间的,这样记忆确实很麻烦 所以我们可以 利用根模块的getters包装子模块的state数据, 可以用 根模块的actions里面访问其他模块的actions或者mutations
// 将子模块的state,变成根模块下的getters
export default new Vuex.Store({
getters:{
namelist:function(state){
// state 表示所有的state数据,包括子模块下的
return state.role.rolelist
},
// 简写
//namelist:state=>state.role.rolelist
}
})
//子模块写法
{
state:()=>({
namelist:[]
}),
namespaced:true
}
// 子模块的actions调用其他模块的actions或者mutations
actions:{
方法名(context){
context.commit('方法名') // 触发自己的mutations方法
context.commit('模块名/方法名') // 触发自己的子模块的mutations方法
context.commit('方法名',null,{
root:true}) // 触发根模块的mutations方法或者没开启命名空间模块下的mutations方法
context.commit('模块名/方法名',null,{
root:true}) // 触发其他模块的mutations方法
context.dispatch('方法名') // 触发自己的actions方法
context.dispatch('模块名/方法名') // 触发自己的子模块的actions方法
context.dispatch('方法名',null,{
root:true}) // 触发根模块的actions方法或者没开启命名空间模块下的actions方法
context.dispatch('模块名/方法名',null,{
root:true}) // 触发其他模块的actions方法
}
},
namespaced:true // 开启了命名空间
要約する
さて、今日はここまでです。今日の研究があなたのお役に立てば幸いです。ぜひサポートしてください。