Vuex案例实现加减功能

来源：互联网发布：怎么自己注册域名编辑：程序博客网时间：2024/05/19 13:08

1.在项目中安装vuex(不会创建项目的可以查看我的文章:Vue项目步骤)

npm install vuex --save-dev

2.在components文件夹内
建立vuex.vue
在src文件夹内

建立store.js

3.打开main.js 修改其中数据,把vuex.vue引入进来
因为我们在这里用不到路由,所以把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})

阅读全文

0 0