セルフモチベーション
人々が逆境にあるとき、環境に適応する彼らの能力は驚くべきものです。人々は不幸に耐えることができ、また不幸を克服することもできます。なぜなら、人々には驚くべき可能性があり、それを使用することを決意している限り、困難を克服することができるからです。
コアコンセプトの概要
Vuexの主なコアコンセプトは次のとおりです。
- 状態
- 突然変異
- アクション
- ゲッター
状態
州は唯一の公開データソースを提供します。すべての共有データは、ストレージのためにストアの州に統合する必要があります
// 创建store 数据源，提供唯一公共数据
const store = new Vuex.Store({
state:{
count:0}
})
コンポーネントがStateのデータにアクセスするための最初の方法：
this.$store.state.全局数据名称
コンポーネントが状態にアクセスするための2番目の方法
// 1. 从vuex中按需导入 mapState函数
import {
mapState} from 'vuex'
インポートしたばかりのmapState関数を使用して、現在のコンポーネントに必要なグローバルデータを現在のコンポーネントの計算された計算済みプロパティにマップします
// 2. 将全局数据，映射为当前组件的计算属性
computed :{
...mapState(['count'])
}
突然変異
ミューテーションはストア内のデータを変更するために使用されます
①ストア内のデータはミューテーションによってのみ変更でき、ストア内のデータを直接操作する
ことはできません。②操作は少し面倒ですが、すべての変更を一元的に監視できます。データ。
突然変異を定義する
// 定义Mutation
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
add(state) {
//变更状态
state.count ++
}
}
}
突然変異をトリガーする
// 触发mutation
methods:{
handle1(){
// 触发 mutations 的第一种方式
this.$store.commit('add')
}
}
ミューテーションがトリガーされたときに送信を渡すことができます
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
// state 代表state中的全局数据
add(state,step) {
//变更状态
state.count+= step
}
}
}
突然変異をトリガーする
btnHandler2() {
// 在调用 commit 函数，
// 触发mutations 时携带参数
this.$store.commit('addN', 3)
}
this。$ store.commit（）は、ミューテーションをトリガーする最初の方法であり、ミューテーションをトリガーする2番目の方法です。
// 1. 从vuex 中按需导入 mapMutation 函数
import {
mapMutations} from 'vuex'
インポートしたばかりのmapMutations関数を使用して、必要なミューテーション関数を現在のコンポーネントのメソッドメソッドにマップします
methods:{
...mapMutations(['add','addN'])
}
したがって、ミューテーションで非同期コードを記述することはできません
アクション
アクションは非同期タスクの処理に使用されます。
非同期操作でデータを変更する場合は、MutationではなくActionを使用する必要がありますが、Actionでは、Mutationを送信して間接的にデータを変更する必要があります。
// 定义 Action
const store = new Vuex.Store({
// ...省略其他代码
mutations: {
add(state) {
//变更状态
// 不要在mutations 函数中执行异步操作
// setTimeout(() => {
// state.count++
// }, 100)
state.count++
},
actions: {
addAsync(context) {
setTimeout(() => {
context.commit('add')
}, 1000)
}
}
}
methods: {
// 异步 地让 count 自增加一
btnHandler3() {
// 这里的 dispatch函数 专门用来触发 action
// 触发 actions 的第一种方式
this.$store.dispatch('addAsync')
}
}
アクションをトリガーするときにパラメーターを実行する非同期タスク
// 定义 Action
const store = new Vuex.Store({
// ... 省略其他代码
mutations:{
addN(state,step){
state.count += step
}
},
actions:{
addNAsync(context,step){
setTimeout(() =>{
context.commit('addN',step)
},1000）
}
}
}）
// 触发 Action
methods:{
handle(){
// 在调用 dispatch 函数，
// 触发 actions 时携带参数
this.$store.dispatch('addNAsync',5)
}
}
アクションをトリガーする2番目の方法
this。$ store.dispatch（）は、アクションをトリガーする最初のメソッドです
// 1. 从vuex 中按需导入mapActions 的函数
import {
mapActions} from 'vuex'
インポートしたばかりのmapActions関数を使用して、必要なアクション関数を現在のコンポーネントのメソッドにマップします。
// 2. 将指定的actions 函数，映射为当前组件的methods方法
methods:{
...mapActions(['addASync','addNASync'])
}
ゲッター
ゲッターは、ストア内のデータを処理して新しいデータを形成するために使用されます
①ゲッターは、Vueの計算プロパティと同様に、ストア内の既存のデータを処理して新しいデータを形成できます
②ストア内のデータが変更されると、ゲッターデータも変更されます変更に従ってください
// 定义 Getter
const store =new Vuex.Store({
state:{
count:0
},
getters: {
showNum(state) {
return '当前最新的数量是【' + state.count + '】'
}
}
})
ゲッターを使用する最初の方法
this.$store.getters.名称
gettIngを使用する2番目の方法
import {
mapGetters} from 'vuex'
computed :{
...mapGetters(['showNum'])
}
彼氏はガールフレンドを怒らせることはできません。彼氏が間違っているのでガールフレンドは怒っています。いずれにせよ、彼氏は間違っています。彼氏が間違っている場合、彼は喜んでガールフレンドからの罰を受け入れる必要があります。ガールフレンドのボーイフレンドと一緒に。ハンに唾を吐くだけで、ボーイフレンドはガールフレンドをもっと幸せにし、ガールフレンドのことを考え、翡翠を憐れんで大切にする方法を知って、ガールフレンドの世話をする必要があります。つづく。。。。