Vuex 状態管理の使用方法

今回は、Vuex 状態管理の使い方と、Vuex 状態管理を使用する際の注意事項について説明します。以下は実際のケースです。見てみましょう。

Vuex は Vue.js 用に設計されたツールです アプリケーション開発の状態管理パターン。集中ストレージを使用してアプリケーションのすべてのコンポーネントのステータスを管理し、対応するルールを使用してステータスが予測可能な方法で変化することを保証します。 Vuex も統合されています Vue の公式デバッグツール devtools 拡張機能は、構成ゼロのタイムトラベル デバッグ、ステータス スナップショットのインポートおよびエクスポートなどの高度なデバッグ機能を提供します。

以上がvuexの公式ドキュメントでのvuexの紹介です 公式ドキュメントではvuexの使い方が詳しく説明されています。ここでは vuex の使用法については詳しく説明しません。このブログを書く目的は、一部の学生が vuex をより早く理解し、使い始めることができるようにすることだけです。

1.

$ npm install vuex --save

をインストールします 2. main.jsメインエントランスjsでstore.js

import Vue from 'vue'
import App from './App'
import router from './router' 
import store from './vuex/store'  //引用store.js
Vue.config.productionTip = false //阻止在启动时生成生产提示 
//vue实例
new Vue({
 el: '#app',
 router,
 store,              //把store挂在到vue的实例下面
 template: '<app></app>',
 components: { App }
})

を参照 3.store.js で Vuex を参照する

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) //注册Vuex
// 定义常量  如果访问他的话，就叫访问状态对象
const state = {
  count: 1
}
// mutations用来改变store状态, 如果访问他的话，就叫访问触发状态
const mutations = {
  //这里面的方法是用 this.$store.commit('jia') 来触发
  jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  },
}
//暴露到外面，让其他地方的引用
export default new Vuex.Store({
  state,
  mutations
})

4. vueコンポーネントで

を使用する $store.commit('jia') 領域を使用して、ミューテーションの下の加算および減算メソッドをトリガーします

<template>
 <p>
   </p>
<h1>Hello Vuex</h1>
   <h5>{{$store.state.count}}</h5>
   <p>
    <button>+</button>
    <button>-</button>
   </p>
 
</template>
<!-- 加上scoped是css只在这个组件里面生效，为了不影响全局样式 -->
<style>
  h5{
   font-size: 20px;
   color: red;
  }
</style>

5. デモをチェックしてください

6. 状態は状態オブジェクトにアクセスします

computed を使用して

<template>
 <p>
   </p>
<h1>Hello Vuex</h1>
   <h5>{{count}}</h5>
   <p>
    <button>+</button>
    <button>-</button>
   </p>
 
</template>
<script>
import {mapState} from &#39;vuex&#39;
export default{
  name:&#39;hello&#39;, //写上name的作用是，如果你页面报错了，他会提示你是那个页面报的错，很实用
  // 方法一
  // computed: {
  //  count(){
  //   return this.$store.state.count + 6
  //  }
  // }
  
  // 方法二 需要引入外部 mapState
  computed:mapState({
   count:state => state.count + 10
  })
 
  // ECMA5用法
  // computed:mapState({
  //  count:function(state){
  //   return state.count
  //  }
  // })
  
  //方法三
  // computed: mapState([
  //  &#39;count&#39;
  // ])
 }
</script>

を計算します 7. ミューテーショントリガー状態 (同期状態)

<template>
 <p>
   </p>
<h1>Hello Vuex</h1>
   <h5>{{count}}</h5>
   <p>
    <button>+</button>
    <button>-</button>
   </p>
 
</template>
<script>
import {mapState,mapMutations} from &#39;vuex&#39;
 export default{
  name:&#39;hello&#39;, //写上name的作用是，如果你页面报错了，他会提示你是那个页面报的错，很实用
  //方法三
  computed: mapState([
   &#39;count&#39;
  ]),
  methods:{
   ...mapMutations([
     &#39;jia&#39;,
     &#39;jian&#39;
   ])
  }
 }
</script>

8. ゲッターはプロパティ

を計算します ゲッターは方向を変えるアロー関数を使用できません

store.js にゲッター

// 计算
const getters = {
  count(state){
    return state.count + 66
  }
}
export default new Vuex.Store({
  state,
  mutations,
  getters
})
//count的参数就是上面定义的state对象
//getters中定义的方法名称和组件中使用的时候一定是一致的,定义的是count方法，使用的时候也用count，保持一致。
组件中使用
<script>
 import {mapState,mapMutations,mapGetters} from &#39;vuex&#39;
 export default{
  name:&#39;hello&#39;,
  computed: {
   ...mapState([
    &#39;count&#39;
   ]),
   ...mapGetters([
    &#39;count&#39;
   ])
  },
  methods:{
   ...mapMutations([
     &#39;jia&#39;,
     &#39;jian&#39;
   ])
  }
 }
</script>

を追加 9. アクション (非同期状態)

store.js にアクション

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 定义常量
const state = {
  count: 1
}
// mutations用来改变store状态 同步状态
const mutations = {
  jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  },
}
// 计算属性
const getters = {
  count(state){
    return state.count + 66
  }
}
// 异步状态
const actions = {
  jiaplus(context){
    context.commit('jia') //调用mutations下面的方法
    setTimeout(()=>{
      context.commit('jian')
    },2000)
    alert('我先被执行了，然后两秒后调用jian的方法')
  },
  jianplus(context){
    context.commit('jian')
  }
}
export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})

を追加 コンポーネントで

<template>
 <p>
   </p>
<h1>Hello Vuex</h1>
   <h5>{{count}}</h5>
   <p>
    <button>+</button>
    <button>-</button>
   </p>
   <p>
    <button>+plus</button>
    <button>-plus</button>
   </p>
 
</template>
<script>
 import {mapState,mapMutations,mapGetters,mapActions} from &#39;vuex&#39;
 export default{
  name:&#39;hello&#39;,
  computed: {
   ...mapState([
    &#39;count&#39;
   ]),
   ...mapGetters([
    &#39;count&#39;
   ])
  },
  methods:{
   // 这里是数组的方式触发方法
   ...mapMutations([
     &#39;jia&#39;,
     &#39;jian&#39;
   ]),
   // 换一中方式触发方法 用对象的方式
   ...mapActions({
    jiaplus: &#39;jiaplus&#39;,
    jianplus: &#39;jianplus&#39;
   })
  }
 }
</script>
<style>
  h5{
   font-size: 20px;
   color: red;
  }
</style>

を使用する 10. モジュールモジュール

多くのステータスを持つ非常に大規模なプロジェクトに適しており、管理が簡単です

store.js を変更する

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
  count: 1
}
const mutations = {
  jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  },
}
const getters = {
  count(state){
    return state.count + 66
  }
}
const actions = {
  jiaplus(context){
    context.commit('jia') //调用mutations下面的方法
    setTimeout(()=>{
      context.commit('jian')
    },2000)
    alert('我先被执行了，然后两秒后调用jian的方法')
  },
  jianplus(context){
    context.commit('jian')
  }
}
//module使用模块组的方式 moduleA
const moduleA = {
  state,
  mutations,
  getters,
  actions
}
// 模块B moduleB
const moduleB = {
  state: {
    count:108
  }
}
export default new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB,
  }
})

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

以上がVuex 状態管理の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。