Vuex implements counter and list display, and vuex implements Counter Display

Source: Internet
Author: User

Vuex implements counter and list display, and vuex implements Counter Display

This tutorial will show two examples of counters and lists to illustrate the simple usage of Vuex.

Github

The process from installation to starting the initial Page is skipped. Note that the route is required during installation.

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

Index. js file content:

Import Vue from "vue" import Vuex from 'vuex' Vue. use (Vuex); // be sure to go to the new Vuex. use export default new Vuex before Store. store ({state: {count: 0 // count} of the counter, mutations: {increment (state) {state. count ++ }}})

Register store in main. js under src

New Vue ({el: '# app', router, store, // register store components: {app}, template:' <App/> '});

Create the Num. vue component in the components folder. The content is as follows:

<Template> <div> <input type = "button" value = "+" @ click = "incr"/> <input type = "text" id = "input" v- model = "count"/> <input type = "button" value = "-"/> <br/> <router-link to = "/list"> list demo </ router-link> </div> </template> <script> import store from '.. /store '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") // trigger modification }}</script> <! -- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>

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

Start the instance and you will see the result. The counter demo is completed.

Now, the list demonstration is started.

Create an api folder in the src directory, and then create an 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);  })*/ },}

Modify store/modules/cover. js: (define Data Model)

Import cover from '.. /.. /api/cover 'const state = {all: []}; const getters = {allCover: state => state. all // getter is used to provide the access interface}; const actions = {getAllCover ({commit}) {cover. getCover (covers => {commit ('setcover', covers) // trigger setCover modification. })}, RemoveCover ({commit}, cover) {commit ('removecover', cover) }}; const mutations = {// mutations is used to modify the 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}

Register the data model in index. js in the store:

Import Vue from "vue" import Vuex from 'vuex' import cover from '. /modules/cover 'vue. use (Vuex); // be sure to go to the new Vuex. use export default new Vuex before Store. store ({modules: {cover // Register cover data model}, state: {count: 0 // count of the counter}, mutations: {increment (state) {state. count ++ }}})

Create the List. vue component in the components folder. The content is as follows:

<Template> <div class = "list"> <ul> <li v-for = "cover in covers" @ click = "removeCover (cover)" >{{ cover. title }}</li> </ul> <p >{{ covers }}</p> 

Register a new component in the route:

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

Then, access http: // localhost: 8080/#/list to view the result.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.