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

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 'vuex' 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: '#app', router, store, //注册store components: { App }, template: '' });

Copy after login

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

Copy after login

Configure routing in the router folder:

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

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 '../../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 }

Copy after login

store Register the data model in index.js:

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

Copy after login

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

Copy after login

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

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!