vuex 선언 및 데이터 검색 (전체)

디렉토리

• 추상 전망
• 선언 상태 데이터
• 상태 데이터 전송
• 돌연변이 문
• 돌연변이 호출
• 문의 행동
• 작업을 호출

추상 전망

vuex 기본

---

그것은 다섯 가지로 구성

• 가장 중요한 것은, 처음 세, 당신이 배울만큼 처음 세, 그리고 당신도 될 수 배울 vuex
• 4와 5의 처음 세에 대한 서비스를 할 수 있습니다

    1. state：数据状态-------------------------------------  仓库当中的商品
    2. mutations：函数，同步操作。更改state----------------   工人。用来操作商品
    3. actions:函数，异步操作。通过调用mutations来更改数据---  老板，发送命令
    4. getters:计算属性
    5. modules：模块化。

경고문 1 상태 데이터

라인에 내부에 직접 쓰기

/------------------index.js-----------------------------/

  state: {   // 数据状态
    zhangsan:0,
    lisi:0,
  },

2. 상태 데이터 검색

• $ store.state.xxx
• 나는 창고 그들의 데이터가, 우리가 구성 요소에서 직접 호출 할 수 있음을 선언한다
• 그것은 $ 스토어 내부의 현재 인스턴스 사이에 배치된다

/-------------------------在 App.vue里--------------------------/
<template>
  <div id="app">
  
    <input type="button" :value="'张三'+$store.state.zhangsan">  //我们根据它调用
    
  </div>
</template>

결과 :

3. 돌연변이 문

• 돌연변이가 함수, 함수 이름 제안 대문자.
• 함수의 첫 번째 인자는 수신 된 상태이다.
• 상태 이외에, 당신은 하나의 매개 변수를받을 수 있습니다.
• 당신은 몸의 기능의 상태를 변경할 수 있습니다

    const store = new vuex.Store({
    
        mutations:{
           ADD_ZHANG_SAN(state,n){
              state.zhangsan+=n;
           }
        }
    })

4. 돌연변이 호출

• $ store.commit ( 'XXX', NUM)

/--------------------App.vue-------------------------/
<template>
  <div id="app">
    <input type="button" @click="$store.commit('ADD_ZHANG_SAN',3)" :value="'张三'+$store.state.zhangsan">
  </div>
</template>

이 코드 수단 :

• 이벤트를 트리거 때이 버튼을 클릭하면, ADD_ZHANG_SAN 내부의 돌연변이를 호출, 3의 매개 변수를 전달
• 동작을 호출하는 돌연변이 후에 수행된다 : 변경 내부의 상태 zhangsan 값이이 값을 더한 수를 통과
  

문 5. 행동

• 비동기 작업
• 이를 통해 데이터 전송 (인터페이스)
• 데이터 후의 기능 간의 인터페이스를 호출하면, 콘텐츠 데이터를 업데이트하는 돌연변이

new vuex.Store({
    actions:{
         // 声明
    }
})

예를 들면 :

  actions: {
      // dispatch:调用其它的action  ,state:使用状态，   commit:可以mutations
      async listMore({dispatch,commit,state}){
        // 在该函数当中调用该接口，得到数据以后，通过mutations来更新content数据。
          const {data} = await axios.get("/lg/listmore.json",{
             params:{
                 pageSize:state.pageSize,// 10
                 pageNo:state.pageNo// 1
             }
          })
          commit("CHANGE_CONTENT",data.content.data.page.result);
      }
  },

5. 작업을 호출

• $ store.dispatch ( 'XXX')

<div><input type="button" @click="$store.dispatch('listMore')" value="加载更多"></div>

• listMore 때 트리거 이벤트가 내부 작업을 호출 할 때이 버튼을 클릭
• 당신은 값을 전달할 수 있습니다, 당신은 단지 하나 개의 값을 전달할 수 있습니다