Comment implémenter la fonction de compteur à l'aide de Vuex-js tutoriel-php.cn

Comment implémenter la fonction de compteur à l'aide de Vuex

亚连

Libérer： 2018-05-31 14:06:21

original

2036 Les gens l'ont consulté

Cet article présente principalement en détail l'implémentation Vuex des compteurs et des effets d'affichage de liste. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Ce tutoriel affichera des compteurs et des listes. utilisation simple de Vuex.

Dans ce cas, github

ignore le processus depuis l'installation jusqu'au démarrage de la page initiale. Faites attention à la sélection de l'itinéraire requis lors de l'installation.

Tout d'abord, créez un nouveau répertoire de magasin et les fichiers correspondants dans le répertoire src. La structure est la suivante :

Contenu du fichier index.js :

import Vue from "vue"
import Vuex from &#39;vuex&#39;

Vue.use(Vuex);  //务必在new Vuex.Store之前use一下

export default new Vuex.Store({
 state:{
  count:0    //计数器的count
 },
 mutations:{
  increment(state){
   state.count++
  }
 }
})

Copier après la connexion

Enregistrer le magasin dans main.js sous src

new Vue({
 el: &#39;#app&#39;,
 router,
 store,    //注册store
 components: { App },
 template: &#39;<App/>&#39;
});

Copier après la connexion

Créer un nouveau composant Num.vue dans le dossier des composants avec le contenu suivant

<template>
 <p>
  <input type="button" value="+" @click="incr" />
  <input type="text" id="input" v-model="count"/>
  <input type="button" value="-"/>
  <br/>
  <router-link to="/list">列表demo</router-link>
 </p>
</template>

<script>
 import store from &#39;../store&#39;
 export default {

  computed:{
   count:{
    get:function () {
     return store.state.count
    },
    set:function (val) {
     store.state.count = val
    }
   }
  },

  methods:{
   incr(){
    // store.commit("increment")
    store.commit("increment")  //触发修改
   }
  }
 }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

Copier après la connexion

Configurer le routage dans le dossier du routeur :

import Vue from &#39;vue&#39;
import Router from &#39;vue-router&#39;
import Num from &#39;../components/Num&#39;
import List from &#39;../components/List&#39;

Vue.use(Router)

export default new Router({
 routes: [
  {
   path:&#39;/num&#39;,
   component:Num
  },

  {
   path:"*",
   redirect:"/num"
  }
 ]
})

Copier après la connexion

Lancez-le une fois terminé et vous pourrez voir les résultats. La contre-démonstration est terminée.

Démarrez la démonstration de liste maintenant.

Créez un nouveau dossier api dans le répertoire src, puis créez un nouveau fichier api.

api/cover.js :

const _cover = [
 {"id": 1, "title": "iPad 4 Mini", "price": 500.01, "inventory": 2},
 {"id": 2, "title": "H&M T-Shirt White", "price": 10.99, "inventory": 10},
 {"id": 3, "title": "Charli XCX - Sucker CD", "price": 19.99, "inventory": 5}
];


export default {
 getCover(cb) {
  setTimeout(() => cb(_cover), 100);
/*  $.get("/api/data",function (data) {
   console.log(data);
  })*/

 },
}

Copier après la connexion

Modifier store/modules/cover.js : (définir le modèle de données)

import cover from &#39;../../api/cover&#39;

const state = {
 all:[]
};

const getters={
 allCover:state=>state.all  //getter用来提供访问接口
};

const actions = {
 getAllCover({commit}){
  cover.getCover(covers=>{
   commit(&#39;setCover&#39;,covers)    //触发setCover修改。
  })
 },
 removeCover({commit},cover){
  commit(&#39;removeCover&#39;,cover)
 }
};

const mutations = {  //mutations用来修改state。
 setCover(state,covers){
  state.all = covers
 },
 removeCover(state,cover){
  console.log(cover.id);
  state.all = state.all.filter(function (OCover) {
   return OCover.id !== cover.id
  })
 }
};

export default {
 state,getters,actions,mutations
}

Copier après la connexion

Enregistrez le modèle de données dans index.js dans le store :

import Vue from "vue"
import Vuex from &#39;vuex&#39;
import cover from &#39;./modules/cover&#39;

Vue.use(Vuex);  //务必在new Vuex.Store之前use一下

export default new Vuex.Store({

 modules:{
  cover     //注册cover数据模型
 },

 state:{
  count:0    //计数器的count
 },
 mutations:{
  increment(state){
   state.count++
  }
 }
})

Copier après la connexion

Créez un nouveau composant List.vue dans le dossier des composants, avec le contenu suivant :

<template>
 <p class="list">
  <ul>
   <li v-for="cover in covers" @click="removeCover(cover)">
    {{cover.title}}
   </li>
  </ul>
  <p>
   {{covers}}
  </p>
  <h2>请尝试点击li。</h2>
  <router-link to="/num">计数器demo</router-link>

 </p>
</template>

<script>
import {mapGetters,mapActions} from &#39;vuex&#39;;

export default {
 computed:mapGetters({
  covers:"allCover"   //利用module的getter获得数据
 }),

 methods:mapActions([
  &#39;removeCover&#39;    //利用module的action删除数据
 ]),

 created(){
  this.$store.dispatch(&#39;getAllCover&#39;)  //调用cover数据模型的getAllCover action 用来初始化列表数据。
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .list{
  text-align: left;
 }
</style>

Copier après la connexion

Enregistrez le nouveau composant dans le routage :

import Vue from &#39;vue&#39;
import Router from &#39;vue-router&#39;
import Num from &#39;../components/Num&#39;
import List from &#39;../components/List&#39;

Vue.use(Router)

export default new Router({
 routes: [
  {
   path:&#39;/num&#39;,
   component:Num
  },
  {
   path:&#39;/list&#39;,
   component:List
  },
  {
   path:"*",
   redirect:"/num"
  }
 ]
})

Copier après la connexion

Une fois terminé, visitez http://localhost:8080/#/list pour voir les résultats.

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