基于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
  configRouters = configRouters.concat(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 {
    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>