Vuex公共数据管理工具

用途
Vuex 是Vue配套的公共数据管理工具，它可以把一些共享数据保存到vuex，方便程序中的任何组件使用和修改公共数据
参考官网
使用方式
安装：cnpm i vuex --save
导包：import Vuex from 'vuex'
注册Vuex到vue中：Vue.use(Vuex)
创建一个数据库仓储对象：
const store = new Vuex.Store({ state:{ count:0 }, mutations:{ } })
挂载：

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store,//只要挂在到vm身上，任何组件都可以使用
})

项目使用vue-cli构建
组件通信关系为平级，不是父子组件，样式有使用mui的样式

image.png

image.png

main.js文件中代码

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false
//导包
import Vuex from 'vuex'
//注册Vuex到vue中
Vue.use(Vuex)
//创建一个数据库仓储对象
const store = new Vuex.Store({
  state:{
    count:0
  },
  mutations:{
    //注意：如果想操作store中的state的值，只能通过mutations提供的方法才能操作对应的数据，不能直接操作state中的数据，万一各个组件的直接操作会
    //导致数据的紊乱，也不能快速定位到原因，因为，每个组件都有操作数据的方法
    increment(state){
      state.count++;
    },
    //注意调用mutations调用该方法的话，只能通过this.$store.commit('方法名'),这种调用和子组件调用父组件的方法很像this.$emit("方法名")
    //第二个为参数的值可以传对象
    subtract(state,obj){
      state.count-=obj.nun;
    }
  },
  getters:{
    //注意：这里的getters只负责对外提供数据，不负责修改数据，如果想要修改数据，请找mutations,使用方式：this.$store.getters.opt
    //getters中的方法和组件过滤器中的类似，他们都没有修改数据，而是将数据进行一层包装，提供给调用者，
    //computed和getters比较像，只要state中的数据发生了变化，那么getters也正好要使用state中的数据，那么会立刻触发getters重新求值
    opt(state){
      return '当前的值为：'+ state.count
    }
  }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store,//只要挂在到vm身上，任何组件都可以使用
})

app.vue中的代码

<template>
  <div id="app">
    <!-- <router-view/> -->
    <account></account>
    <hr>
    <complete></complete>
  </div>
</template>

<script>
  import account from '@/components/account'
  import complete from '@/components/complete'
  import './lib/css/css/mui.min.css'
  /* import './lib/js/mui.min.js' */
  export default {
    name: 'App',
    data() {
      return {

      }
    },
    methods:{

    },
    components:{
      account,
      complete
    }
  }
</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>

account.vue中的代码

<template>
  <div class="mui-numbox">
    <button class="mui-btn mui-btn-numbox-minus" type="button" @click='sub'>-</button>
    <input class="mui-input-numbox" type="number" v-model = 'this.$store.state.count'/>
    <button class="mui-btn mui-btn-numbox-plus" type="button" @click="add">+</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    methods:{
      add() {
        //千万不要这么使用，不符合vuex的设计理念，
        //this.$store.state.count++;
        this.$store.commit('increment')
      },
      sub() {
        this.$store.commit('subtract',{name:'y',nun:2})
      }
    }
  }
</script>

<style>
</style>

complete.vue中的代码

<template>
  <div>
    <div>当前数量为：{{this.$store.state.count}}</div>
    <hr>
    <div>{{this.$store.getters.opt}}</div>
  </div>

</template>

<script>
</script>

<style>
</style>