Comment utiliser les fichiers dans vue-js tutoriel-php.cn

Comment utiliser les fichiers dans vue

亚连

Libérer： 2018-06-12 16:29:12

original

1677 Les gens l'ont consulté

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 &#39;vue&#39; //引入vue
import Vuex from &#39;vuex&#39; // 引入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
   }
 }
})

Copier après la connexion

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>

Copier après la connexion

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.