vuex 学習の章

vuexの使用

記事ディレクトリ

vuexの使用
序文
1.vuexとは何ですか?
2. 利用手順
要約する

序文

vuex の使用シナリオ: プロジェクト内で再利用する必要があるコードが複数ある場合は、vuex を使用できます。さらに、vuex データは応答性が高く、変更する限り、ページ上のどこで使用されても直接更新されます。ローカルストレージよりも簡単です。

提示：以下是本篇文章正文内容，下面案例可供参考

1.vuexとは何ですか?

概念: これは集中状態マネージャーです (コンポーネント間で共有されるデータはここに保管されます)。

2. 利用手順

1.vuexをインストールする

npm i vuex -S

2.vuexを使用する

プロジェクト（package.json）のダウンロードが成功したか確認する

成功すると、対応するファイルはプロジェクトに直接生成されないため、手動で追加する必要があります。src/store/index.js 内

注：一般情况下，拿到的项目中都存在vuex可直接使用

ケース(カウンター)

// 1. 导入vuex依赖包
import Vue from 'vue'
import Vuex from 'vuex';
Vue.use(Vuex)

// 2. 创建store对象
 const store = new Vuex.Store({
    
    
   state:{
    
    
     count:10
   },
   mutations:{
    
    
     reducenum:(state,data=1)=>{
    
    
      state.count -= data
    }
  },
  actions:{
    
    
     reducenumSunc:(context,data)=>{
    
    
      setTimeout(()=>{
    
    
        context.commit('reducenum',data)
      },2000)
    },
    getters:{
    
    
      username:state => state.userinfo.username
   }
 })
 //3.暴露实例对象
 export default store

ストアインスタンスを main.js でグローバルにインポートし、vue インスタンスにマウントすることを忘れないでください。

import store from './store'

// 挂载到vue实例上
new Vue({
    
    
  store
}).$mount('#app')

ここがポイント、読み方です

// 读取方式1：$store.state.属性名
eg：$store.state.count
// 读取方法2：
// 1.导入vuex的辅助函数
// 2.将state里面的数据映射为当前组件的计算属性
eg：import {
    
     mapState } from 'vuex';
	...mapState(['count'])
// 修改state方法1：$store.commit('mutations方法名',实参)
eg：$store.commit('reducenum',data)
// 修改state方法2：
// 1.导入辅助函数mapMutations
// 2.将mutations里面的方法映射为当前组件方法
eg：import {
    
     mapMutations } from 'vuex';
	...mapMutations(['reducenum']),
// 触发actions方法1:  $store.dispatch('actions方法名',实参)
eg：$store.dispatch('reducenumSunc',data)
// 触发actions方法2:
// 1.导入辅助函数mapActions
// 2.将mutations里面的方法映射为当前的组件方法
eg：import {
    
     mapActions } from 'vuex';
	...mapActions(['reducenumSunc'])
// 读取getters方式1: $store.getters.属性名
eg：$store.getters.username
// 读取getters方法2: 
// 1.导入vuex里面的辅助函数mapStste 
// 2. 将getters里面的数据映射为当前组件的计算属性
eg：import {
    
     mapGetters } from 'vuex';
	...mapGetters(['username'])

结合这张图来进行理解
ここに画像の説明を挿入します

要約する

注意：mutations是修改修改state的唯一方式(同步)，而actions是间接修改state方式(异步）

Vuex では、単一ページのステータス管理と複数ページのステータス管理を分離します。単一ページの状態管理の場合、さまざまな操作を実行するための状態ビューアクションのみが存在します。複数ページの状態管理は上図のとおりで、複数の試行が同じ状態に依存していることがわかりますが、状態が変化すると複数のインターフェースを更新する必要があります。

さて、今日は vuex モジュールの学習について次の記事で学習します。今日の学習が皆さんのお役に立てれば幸いです。忘れずにサポートしてください。

前の記事: uniapp イメージプレビューの実装