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

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.