vuex通过store来计算两数相加之和？

Vuex：是基于vue.js应用开发的状态管理模式，它采用集中式存储管理应用所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
state:状态，通过this.$store.state.xxx获取数据
getter：获取最新的值，或者取值的时候做取值前的一些操作，拿到的是被操作后的值
mutations:修改器，用于修改state的状态变量，唯一修改方式
strict:true代表只能通过mutations修改state
module:模块化，向store注入其他子模块，用于多人开发多模(namescoped：是否全局)
plugin：模块，用于向vuex加入运行期的插件

效果图片:

helloworld.vue

<template>
  <div class="hello">
    <!-- this.可省略指向根实例 -->
    <!-- <h1>{{ msg }}</h1> -->
    <!-- 使用组件 -->
     <home></home>
    <button @click="total">求和</button>
  </div>
</template>

<script>
//引入组件
import Home from './Home.vue'
export default {
  name: 'HelloWorld',
  methods:{//方法
    total(){//this.m ($store可之间获取)
     this.$store.commit('getnums');//触发mutations自带commit属性
    }
  },
  components:{//注册组件
    home:Home
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
button {
 background: #42b983;
 outline: none;
 border:none;
 padding: 5px 10px;
 border-radius: 5px;
}
</style>

home.vue

<template>
  <div class="home">
    <input type="text" v-model="sum.a" @blur="homeaandb" /> +
    <input type="text" v-model="sum.b" @blur="homeaandb" />
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      sum: {
        a: '',
        b: ''
       }
    }
  },
  methods: {
    //定义一个方法去触发muations
    homeaandb(){
     //失去焦点触发方法
     this.$store.commit("getaandb",this.sum)

    }
  }
}
</script>

<style lang="less" scoped>
.home {
  display: flex;
  -webkit-disply: flex;
  -moz-display: flex;
  justify-content: space-between;
  input {
    border: 1px solid #ddd;
    width: 141px;
    padding: 5px 0;
  }
}
</style>

child.vue

<template>
  <div class="child">
   总果是：{{$store.state.nums}}
  </div>
</template>

<script>
export default {
  name:'Child',
}
</script>

<style scoped lang="less">
.child{
  width:100%;
}

</style>

store文件夹下index.js

import Vue from 'vue'
//1.引入vuex
import Vuex from 'vuex'
//logger日志
import logger from '../../node_modules/vuex/dist/logger'

Vue.use(Vuex);//2.供全局使用vuex
// Vue.config.productionTip = false
//3.创建一个仓库
const store= new Vuex.Store({//供全局使用//抛出自定义的仓库
  strict:true,//代表只能通过mutations修改state里面的值
  state:{//存状态
    nums:0,//总和
    s_a:0,//a
    s_b:0//b
  },
  mutations:{//可预测的//唯一可更改state状态的方式
    //定义一个方法去操作a和b
    getaandb(state,n){//初始值，n改变值
      state.s_a=n.a;//接收a
      state.s_b=n.b;//接收b   
    },
    //求和
    getnums(state){//当触发这个方法传给m总和
     state.nums=(state.s_a-0)+(state.s_b-0);//nums总和=m（赋值）
    }
  },
  plugins:[logger()]//自带的日志插件
 
})
//抛出(和组件一样要抛出常量)
export default store

router下index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {path: '/',name: 'HelloWorld',component: HelloWorld},
    {path: '/HelloWorld',component: HelloWorld}
  ]
})

APP.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <Child></Child>
    <router-view/>
  </div>
</template>

<script>
import Child from './components/Child'
export default {
  name: 'App',
  components:{
    Child
  }
}
</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>