declaraciones vuex y recuperación de datos (Todos)

directorio

• perspectivas abstractas
• datos de estado declaradas
• La transferencia de datos de estado
• declaración de mutaciones
• mutaciones llamada
• las acciones de declaración
• acciones de llamadas

perspectivas abstractas

Fundamentos vuex

---

Se compone de cinco

• vuex que es más importante, los tres primeros, los tres primeros, siempre y cuando se aprende, y se aprende incluso convertirse
• 4 y 5 son para hacer el servicio para los tres primeros de

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

Declaración 1. Los datos de estado

Escribir directamente en el interior de la línea

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

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

la recuperación de datos 2. Estado

• $ store.state.xxx
• Declaro que los datos en el almacén de ellos, que se pueden llamar directamente en el componente que
• Se coloca entre la instancia actual de la parte interior $ tienda

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

resultados:

3. comunicado mutaciones

• mutaciones es una función, la función de sugerencias de nombres en mayúsculas.
• El primer argumento de la función es el estado recibió.
• Además del estado, puede recibir un solo parámetro.
• Se puede cambiar el estado de la función en el cuerpo

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

4. mutaciones llaman

• $ 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>

Este medio de código:

• Cuando hago clic en el botón cuando el evento desencadenante, llamar a las mutaciones dentro ADD_ZHANG_SAN, y pasar un parámetro de 3
• Una operación se realiza después de las mutaciones que se pide: el valor zhangsan estado dentro del cambio que pasa este valor más el número de
  

5. Las acciones de declaración

• operación asíncrona
• A través de la cual la transferencia de datos (interfaz)
• La invocación de la interfaz entre la función, obtenida después de actualizar los datos de mutaciones de datos de contenido

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

Por ejemplo :

  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. Acciones llaman

• $ Store.dispatch ( 'xxx')

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

• listMore cuando hago clic en el botón cuando el evento desencadenante, llame a las acciones dentro de
• Puede pasar un valor, sólo se puede pasar a un valor