vue 计数器_Vuex实现计数器以及列表展示效果

本篇教程将以计数器及列表展示两个例子来讲解Vuex的简单用法。

从安装到启动初始页面的过程都直接跳过。注意安装时选择需要路由。

首先，src目录下新建store目录及相应文件，结构如下：

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

}

}

})

src下的main.js里注册store

new Vue({

el: '#app',

router,

store, //注册store

components: { App },

template: ''

});

components文件夹内新建Num.vue组件，内容如下

列表demo

import store from '../store'

export default {

computed: