Installation et utilisation du mode de gestion d'état Vue.js Vuex (exemple de code)

Ce que cet article vous apporte concerne l'installation et l'utilisation du mode de gestion d'état Vue.js (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

uex est un modèle de gestion d'état développé spécifiquement pour les applications Vue.js. Il utilise un stockage centralisé pour gérer l'état de tous les composants de l'application et utilise les règles correspondantes pour garantir que l'état change de manière prévisible.

Installer et utiliser vuex

Nous installons d'abord vuex dans l'environnement de développement vue.js 2.0 :

npm install vuex --save

Ensuite, ajoutez :

import vuex from 'vuex'
Vue.use(vuex);
const store = new vuex.Store({//store对象
    state:{
        show:false,
        count:0
    }
})

à main.js

Ensuite, ajoutez l'objet store lors de l'instanciation de l'objet Vue :

new Vue({
  el: '#app',
  router,
  store,//使用store
  template: '<app></app>',
  components: { App }
})

Maintenant, vous pouvez obtenir l'objet d'état via store.state et déclencher des changements d'état via la méthode store.commit :

store.commit('increment')

console.log(store.state.count) // -> 1

État

Obtenir l'état de Vuex dans le composant Vue

Le moyen le plus simple de lire l'état à partir de l'instance du magasin est de renvoyer un certain état dans la propriété calculée :

// 创建一个 Counter 组件
const Counter = {
  template: `<p>{{ count }}</p>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

Fonction auxiliaire mapState

Lorsqu'un composant doit obtenir plusieurs états, il sera quelque peu répétitif et redondant de déclarer ces états comme propriétés calculées. Afin de résoudre ce problème, nous pouvons utiliser la fonction auxiliaire mapState pour nous aider à générer des attributs calculés :

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

Lorsque le nom de l'attribut calculé mappé est le même que le nom du nœud enfant de l'état , on peut aussi passer un caractère au tableau mapState String :

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

Getter

les getters sont similaires aux calculés dans vue, ils sont utilisés pour calculer l'état puis générer de nouvelles données (state) , tout comme les propriétés calculées, les getters La valeur de retour sera mise en cache en fonction de ses dépendances, et ne sera recalculée que lorsque ses valeurs de dépendance changeront.

Getter accepte l'état comme premier argument :

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

Accès via les propriétés

Getter est exposé en tant qu'objet store.getters, auquel vous pouvez accéder en tant que propriétés Ces valeurs :

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

Getter peut également accepter d'autres getters comme deuxième paramètre :

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

store.getters.doneTodosCount // -> 1

Utilisé dans les composants :

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

Notez que le getter est dans When accessibles via les propriétés, ils sont mis en cache dans le cadre du système réactif de Vue.

Accès via méthode

Accès via méthode

Vous pouvez également transmettre des paramètres au getter en laissant le getter renvoyer une fonction. Très utile lorsque vous interrogez le tableau dans le store :

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

Notez que lorsque l'on accède au getter via une méthode, il sera appelé à chaque fois sans mettre les résultats en cache.

Fonction auxiliaire mapGetters

La fonction auxiliaire mapGetters mappe simplement les getters du magasin aux propriétés calculées locales :

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

Si vous souhaitez obtenir une propriété getter d'une autre Nom, utilisez la forme de l'objet :

mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

Mutation

La seule façon de changer l'état dans la boutique Vuex est de soumettre une mutation.

Inscription :

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

Appel :

store.commit('increment')

Soumettre la charge utile

Vous pouvez transmettre des paramètres supplémentaires à store.commit , c'est-à-dire le charge utile de mutation :

// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}

store.commit('increment', 10)

Si plusieurs paramètres sont soumis, ils doivent être soumis sous forme d'objets

// ...
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

store.commit('increment', {
  amount: 10
})

Remarque : dans les mutations, l'opération doit être synchrone ;

Action

L'action est similaire à la mutation, mais la différence est :

• L'action soumet une mutation au lieu d'un état de changement direct.

• L'action peut contenir n'importe quelle opération asynchrone.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

L'action est déclenchée via la méthode store.dispatch :

store.dispatch('increment')

Effectuer des opérations asynchrones à l'intérieur de l'action :

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

Formulaire d'objet Paramètres de transmission :

// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})

Recommandations associées :

Vuex de Vue.js (gestion de l'état)

Comment Vuex devrait-il la gestion de l'état utilise

À propos de la gestion de l'état du compartiment familial de Vuex

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!