How to implement counter function using Vuex-JS Tutorial-php.cn

How to implement counter function using Vuex

亚连

Release： 2018-05-31 14:06:21

Original

2054 people have browsed it

This article mainly introduces the counter and list display effects of Vuex in detail. It has certain reference value. Interested friends can refer to it.

This tutorial will use counter and list display. Two examples to explain the simple usage of Vuex.

This case github

The process from installation to startup of the initial page is skipped directly. Pay attention to selecting the required route during installation.

First, create a new store directory and corresponding files in the src directory. The structure is as follows:

index.js file content:

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++
  }
 }
})

Copy after login

src Register store

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

Copy after login

in the main.js under the new Num.vue component in the components folder, the content is as follows

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

Copy after login

Configure routing in the router folder:

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"
  }
 ]
})

Copy after login

After completion Start it and see the results. The counter demonstration is completed.

Start the list demonstration now.

Create a new api folder in the src directory, and then create a new api file.

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

 },
}

Copy after login

Modify store/modules/cover.js: (define data model)

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
}

Copy after login

store Register the data model in index.js:

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++
  }
 }
})

Copy after login

Create a new List.vue component in the components folder, with the following content:

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

Copy after login

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"
  }
 ]
})

Copy after login

After completion, visit http://localhost:8080/#/list to see the results.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Detailed explanation of how to use the vue iview component table render function

nodejs implements the method of parsing xml strings into objects Example

WeChat applet implements skin changing function

The above is the detailed content of How to implement counter function using Vuex. For more information, please follow other related articles on the PHP Chinese website!