storeは4種類に分かれています


vuexを使用する場合、index.jsが長すぎるとコードの可読性が低下することを防止するために、storeのindex.インデックスjs.js, actions.js, getters.js, mutations.jsに分けて使いたい.
まず、写真のようにactions、getters、index、variantを作ります.

使い方を知っておく.
その後のインデックス.jsを次のように変更します.
// Vuex 조립
import { createStore } from 'vuex'
import * as getters from './getters'
import * as mutations from './mutations'
import * as actions from './actions'

const state = {
  notices: "기본값",
}

const root = createStore({
  namespaced: true,
  state,
  getters,
  mutations,
  actions
})

export default root
今はindexjsにはstateがあり、残りのファイルでaction、variation、getters要素に分けることができます.詳細な使用方法について説明します.

  • dispatch
    <script>
    import { useStore } from 'vuex'
    export default ({
      setup() {
        const store = useStore()
        return {
          getNotices: () => {
            store.dispatch('getNotices') // actions/getNotices에 dispatch
          }
        }
      },
    })
    </script>
    vueコンポーネントのsetup内部でスケジューリングするには、usStoreをインポートする必要があります.次にconst store=useStore()を使用してstoreを定義し、割り当てます.これにより、storeの方法としてdispatch、commitを用いることができる.上のコードはactionsに割り当てられたgetNotesという関数のコードです.

  • actions
    import axios from 'axios'
    export function getNotices ({ commit }) {
        axios.get('요청주소')
        .then(res => {
          console.log(res.data)
          commit('GET_NOTICES', res.data)
        })
        .catch(err => {
          console.log(err)
        })
    }
    dispatchはactionsのgetNoticesであるため、actionsには対応する操作が必要です.突然変異コミットのために{commit}を使用する必要があります.これはコンテキストです.commitからcommitのみを抽出するのと同じです.

  • mutations
    import router from '../router'
    export const GET_NOTICES = (state, noticeDatas) => {
        state.notices = noticeDatas
        router.push('/admin/notice') // Admin 클릭 => notices가 로드되고 난 후에 notice 페이지로 push
    }
    routerは個人的に追加されました
    GET NOTICESが提出しました.今は上のようにstatenotesを使用する場合はindexです.js状態での通知値を変更できます.
  • 前のプロジェクトはこのように行われたが,actionsにすべてのリクエストが含まれた後,コードは非常に長くなった.次はモジュール別インデックスです.jsを別々に使用する方法