使用Vuex 实现标签数字增加与减小

1. 若安装了命令行工具 ，可以使用命令创建项目

vue create XXX

2.安装vuex

npm install vuex

3.组织目录结构（自己看需要）

4.代码部分

vuex 和 React中的redux一样，是一个集中state管理工具

4-1 首先需要在main.js 引入，然后挂在到Vue实例上

import Vue from 'vue'
// import App from './App.vue'
import App2 from './App2.vue'

import store from './vuex'

Vue.config.productionTip = false

Vue.use(store)

new Vue({
  render: h => h(App2),
  store
}).$mount('#app')

 

4-2 创建store实例

import Vue from 'vue';
import Vuex from 'vuex';
import mutations from './mutations'
import state from './state'

Vue.use(Vuex);

const store = new Vuex.Store({
  state,
  mutations
});
export default store;

 

4-3 编写state

export default{
  count:0
}

 

4-4 编写mutations

export default{

  increaseCount(state){
    state.count++;
  },

  plusCount(state){
    state.count--;
  }
}

 

4-5 在页面中触发事件 store.commit("increaseCount")//函数名，参数模型

<template>
  <div id="app">
    <h1>{{this.$store.state.count}}</h1>
    <button type="button" name="button1" @click="increaseCount">点我增加</button>
    <button type="button" name="button2" @click="plusCount">点我减小</button>
  </div>
</template>

<script>

import store from './vuex'

export default {

  name: 'App2',
  components: {

  },
  methods:{
    increaseCount(){
      store.commit("increaseCount")//函数名，参数模型
    },
    plusCount(){
      store.commit("plusCount")//函数名，参数模型
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>