Comment utiliser les fichiers dans vue

Vuex est un modèle de gestion d'état développé spécifiquement pour les applications Vue.js. Cet article présente principalement la vue frontale Web : comment utiliser vuex en tant que fichier unique. Les amis dans le besoin peuvent se référer à

Qu'est-ce que Vuex ?

Vuex 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. Vuex est également intégré à l'extension devtools de l'outil de débogage officiel de Vue, fournissant des fonctions de débogage avancées telles que le débogage de voyage dans le temps sans configuration, l'importation et l'exportation d'instantanés d'état, etc.

La dernière fois, j'ai utilisé un exemple d'addition et de soustraction pour expliquer l'utilisation de base de vuex et dans quelles circonstances il est utilisé. La dernière fois, j'ai brièvement démontré cet exemple dans un composant. Cette fois, j'ai extrait vuex dans un fichier séparé pour gérer l'état de l'ensemble du projet de manière unifiée.

Comme je l'ai dit la dernière fois, si votre projet est suffisamment grand, il serait préférable d'utiliser vuex pour gérer l'état de l'ensemble du projet. S'il s'agit d'un petit projet, il n'est pas recommandé à tout le monde de l'utiliser. il. Bon, arrêtons de dire des bêtises :

Après avoir préparé tout le projet, vue-cli, webpack, vuex, routeur, etc. sont installés

La première étape consiste à en créer un nouveau Le contenu du fichier appelé : store.js est le suivant :

import Vue from 'vue' //引入vue
import Vuex from 'vuex' // 引入vuex
Vue.use(Vuex)  // 注册vuex
export default new Vuex.Store({ // 暴露与new vuex
 state: { // 相当于vue里data 存放整个项目的各个状态
  number: 0 
 }，
 mutations: { //相当于vue里的methods放方法的，定义一些可以用来调用和修改state里的状态值
   addFun (state,num) { 
    state.number = num
   }
 }
})

Les fichiers de gestion de l'état ont été créés. L'étape suivante est de savoir comment l'appeler

<template>
 {{numbertxt}}
 <button @click="addfun(1)">按钮1</button>
 <button @click="addfun(2)">按钮2</button>
</template> 
<script>
import store from &#39;store.js&#39; // 老样先要引入
 export default{
  store:store, // 定义
  computed: { //实时监听
    numbertxt () { // 实时监听在store.js里的值改变
     return store.state.number
    }
   },
  methods:{
   addfun(num){
    store.commit(&#39;addFun&#39;,num) 
    //显式的提交 (commit) mutation里的方法来改变值
   }
  }
｝
</script>

Le. tout est un peu compliqué. Voilà pour l'exemple d'extraction indépendante depuis vuex Si vous avez des amis qui ne comprennent pas ou n'aiment pas vue, vous pouvez m'ajouter sur WeChat (nihaomeili87) et avançons ensemble !

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Implémentation du composant de sélection de date dans le terminal mobile vue

Comment empaqueter séparément les fichiers JS spécifiés dans le webpack

Comment implémenter une barre de progression circulaire dans le mini programme WeChat

Implémenter des fichiers importés dynamiquement dans le webpack

Astuces associées en JavaScript

Trois modes de base des paramètres de routage de vue (tutoriel détaillé)

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!