基于vue-cli的vue项目之vuex的使用2-------commit参数
2017-09-20 16:47
876 查看
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,n) { state.count+=n; 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> <span>{{$store.state.count}}</spam> </div> </template> <script> export default { name: 'app', methods: { clickme: function() { this.$store.commit("increment",100); } }, } </script> <style> </style>
效果如下:
相关文章推荐
- 基于vue-cli的vue项目之axios的使用4--并发请求
- 基于vue-cli的vue项目之axios的使用4--并发请求
- 基于vue-cli的vue项目之路由1--最基本的使用
- 基于vue-cli的vue项目之axios的使用6--配置axios
- 基于vue-cli的vue项目之vuex的使用5------watch监听vuex内部数据变化
- 基于vue-cli的vue项目之vuex的使用4-------moudles分块
- 基于vue-cli的vue项目之axios的使用3--get传参请求
- 基于vue-cli的vue项目之vuex的使用5------watch监听vuex内部数据变化
- 基于vue-cli的vue项目之axios的使用5--axios方法发送请求
- 基于vue-cli的vue项目之vuex的使用1---------最简单的vuex模板
- 基于vue-cli的vue项目之axios的使用2--最基础的请求
- 基于vue-cli的vue项目之vuex的使用2
- 基于vue-cli的vue项目之axios的使用1--准备工作
- 基于vue-cli的vue项目之vuex的使用3-------action异步传参
- vue-cli+webpack在生成的项目中使用bootstrap方法(一)
- vue2.0新手填坑攻略之使用vue-cli搭建vue项目开发环境到项目发布
- vue-cli 构建的项目中如何使用 Less
- vue-cli+webpack在生成的项目中使用bootstrap实例代码
- Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目
- vue.js学习10之动手使用vue-cli搭建项目及生成的代码进行修改练手