基于vue-cli的vue项目之vuex的使用1---------最简单的vuex模板
2017-09-20 15:36
971 查看
基础什么的,肯定要从最简单的模型学起
1.安装 npm install vuex
2.vuex/store.js//仓库状态管理,第19行。将store抛出
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++;
console.log(state.count);
}
}
})
export default store;
3.main.js//使用vuex,第三十行,使用store,,第二十五行,关联store
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store';
Vue.config.productionTip = false;
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: {
App
},
})
4.app.vue//在组件中使用vuex,第四十玖行,调用vuex/store.js的方法
<template>
<div id="app">
<img src="./assets/logo.png">
<button @click="clickme">点击我</button>
</div>
</template>
<script>
export default {
name: 'app',
methods: {
clickme: function() {
this.$store.commit("increment");
}
},
}
</script>
<style>
</style>
效果:
1.安装 npm install vuex
2.vuex/store.js//仓库状态管理,第19行。将store抛出
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++;
console.log(state.count);
}
}
})
export default store;
3.main.js//使用vuex,第三十行,使用store,,第二十五行,关联store
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store';
Vue.config.productionTip = false;
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: {
App
},
})
4.app.vue//在组件中使用vuex,第四十玖行,调用vuex/store.js的方法
<template>
<div id="app">
<img src="./assets/logo.png">
<button @click="clickme">点击我</button>
</div>
</template>
<script>
export default {
name: 'app',
methods: {
clickme: function() {
this.$store.commit("increment");
}
},
}
</script>
<style>
</style>
效果:
相关文章推荐
- 基于vue-cli的vue项目之axios的使用4--并发请求
- 使用vue-cli搭建vue项目简单教程
- 基于vue-cli的vue项目之vuex的使用5------watch监听vuex内部数据变化
- 基于vue-cli的vue项目之axios的使用3--get传参请求
- 基于vue-cli的vue项目之vuex的使用4-------moudles分块
- 基于vue-cli的vue项目之vuex的使用5------watch监听vuex内部数据变化
- 基于vue-cli的vue项目之axios的使用6--配置axios
- 基于vue-cli的vue项目之路由1--最基本的使用
- 基于vue-cli的vue项目之axios的使用4--并发请求
- vuex在vue-cli和webpack构建的项目中的简单使用
- 基于vue-cli的vue项目之axios的使用5--axios方法发送请求
- 基于vue-cli的vue项目之axios的使用2--最基础的请求
- 基于vue-cli的vue项目之vuex的使用2
- 基于vue-cli的vue项目之axios的使用1--准备工作
- 详解在vue-cli项目下简单使用mockjs模拟数据
- 基于vue-cli的vue项目之vuex的使用2-------commit参数
- 基于vue-cli的vue项目之vuex的使用3-------action异步传参
- vue-cli构建项目使用 less
- vue-cli+webpack在生成的项目中使用bootstrap方法(一)
- vue2.0新手填坑攻略之使用vue-cli搭建vue项目开发环境到项目发布