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: '',
  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: '',
  store,//只要挂在到vm身上，任何组件都可以使用
})

• app.vue中的代码

• account.vue中的代码

• complete.vue中的代码