Vuex案例实现加减功能
1.在项目中安装vuex(不会创建项目的可以查看我的文章:Vue项目步骤) npm install vuex --save-dev2.在components文件夹内 建立vuex.vue 在src文件夹内 建立store.js3.打开main.js 修改其中数据,把vuex.vue引入进来 因为我们在这里用不到路由,所以把import router from './route
·
1.在项目中安装vuex(不会创建项目的可以查看我的文章:Vue项目步骤)
建立vuex.vue
在src文件夹内
因为我们在这里用不到路由,所以把import router from './router'注释
new Vue中的router注释
把vuex引入进来: import Vuex from './components/vuex'
new Vue中App改成Vuex
代码如下:
npm install vuex --save-dev
建立vuex.vue
在src文件夹内
建立store.js
因为我们在这里用不到路由,所以把import router from './router'注释
new Vue中的router注释
把vuex引入进来: import Vuex from './components/vuex'
new Vue中App改成Vuex
代码如下:
import Vue from 'vue'
import App from './App'
// import router from './router'
import Vuex from './components/vuex'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
// router,
template: '<Vuex/>',
components: { Vuex }
})
4.vuex.vue中
<template>
<div>
<p>{{$store.state.num}}</p>
<!-- commit 触发函数的方法 -->
<button @click="$store.commit('reduce')">-</button>
<button @click="$store.commit('add')">+</button>
</div>
</template>
<script>
import store from "../store"
export default{
name:"shortcut",
store
}
</script>
<style>
</style>
5.store.js中
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex);
const state={
num:0
};
const mutations={
//事件
add(){
state.num++
},
reduce(){
state.num--
}
};
const getters={
};
const actions={
//分发事件
};
export default new Vuex.Store({
state,
mutations,
getters,
actions
})
打个广告:淘宝天猫内部优惠群,加我微信拉你进群18801014156
更多推荐
已为社区贡献8条内容
所有评论(0)