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

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 'vuex'

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

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

Enregistrer le magasin dans main.js sous src

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

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>

Configurer le routage dans le dossier du routeur :

import Vue from 'vue'
import Router from 'vue-router'
import Num from '../components/Num'
import List from '../components/List'

Vue.use(Router)

export default new Router({
 routes: [
  {
   path:'/num',
   component:Num
  },

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

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);
  })*/

 },
}

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

import cover from '../../api/cover'

const state = {
 all:[]
};

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

const actions = {
 getAllCover({commit}){
  cover.getCover(covers=>{
   commit('setCover',covers)    //触发setCover修改。
  })
 },
 removeCover({commit},cover){
  commit('removeCover',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
}

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

import Vue from "vue"
import Vuex from 'vuex'
import cover from './modules/cover'

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

export default new Vuex.Store({

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

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

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>

Enregistrez le nouveau composant dans le routage :

import Vue from 'vue'
import Router from 'vue-router'
import Num from '../components/Num'
import List from '../components/List'

Vue.use(Router)

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

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.

Articles connexes :

Explication détaillée de la façon d'utiliser la fonction de rendu de table du composant vue iview

Nodejs implémente la méthode d'analyse chaîne XML dans l'objet Exemple

L'applet WeChat implémente la fonction de changement de skin

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!