基于vue/cli3.0+脚手架搭建Vue项目(05)

---

前言

如果存储在vuex（store）里的变量集不大，可以参照我之前发布过的一篇文章；
如果存储在vuex（store）里的变量集比较大，模块比较多，则可以参考下文

一、vuex

组件之间同一状态的共享

二、vuex初始化

1.安装vuex依赖

npm install vuex@next --save

tip:规避一个报错，如果你写完代码启动服务，运行出现如下错误: 说明vuex版本不适配， 可以自行选择降低版本npm install vuex@3 --save

2.新建store文件夹及demo文件

store文件夹下级index.js文件代码：

import Vue from 'vue'
import Vuex from 'vuex'
import modules from "./importModel";

Vue.use(Vuex)

const store =new Vuex.Store({
    modules
})
export default store

store文件夹下级importModel.js文件代码：

// 自动加载js模块
const files = require.context('./', true, /\index.js$/);
let configRouters = [];
files.keys().forEach(key => {
  if (key === './index.js') return;
  Object.assign(configRouters, files(key).default)
});
export default { ...configRouters };

demo文件夹下级index.js代码：

import { INCREMENT } from './mutations-type';
const state = {
  count: 1,
};
const getters = {
  getNumber: state => state.count,
};
const mutations = {
  [INCREMENT](state) {
    state.count++;
  },
};
const action = {};
export default {
  demo: {
    state,
    getters,
    mutations,
    action,
  }
};

demo文件夹下级mutations-type.js代码：

export const INCREMENT ='INCREMENT'

2.在main.js里挂载store

import store from "@/store"

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

三、store验证

继续使用之前的demo页面：

<template>
  <div>我是demo页面</div>
</template>
<script>
// vuex语法糖
import { mapMutations } from "vuex";
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(['getNumber'])
  },
  created() {
    this.INCREMENT()
    // 或者使用：this.$store.commit('INCREMENT')
    console.log("%c store-demo-number加一:  " +this.getNumber, "font-size: 20px;color: red;")
  },
  methods: {
    ...mapMutations(['INCREMENT'])
  }
};
</script>

这里在使用的时候，用vuex提供的一套语法糖mapGetters/mapMutations...或者this.$store.commit()...都可以

总结

你每天都在做很多看起来毫无意义的决定，但某天你的某个决定就能改变你的一生。–《西雅图不眠夜》