VUEX各个模块的封装以及Router封装

一、各个模块的作用：

• state 用来数据共享数据存储
• mutation 用来注册改变数据状态（同步）
• getters 用来对共享数据进行过滤并计数操作
• action 解决异步改变共享数据（异步）

二、 创建文件：

actions.js

getters.js

mutations.js

mutationsFun.js

state.js

三、编辑文件

//在store的文件下index.js引入
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate";//持久化
import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'

Vue.use(Vuex)

export default new Vuex.Store({
	actions,//actions:actions,
	getters,//getters:getters,
	state,//state:state,
	mutations,//mutations:mutations,
  	plugins: [createPersistedState()]// 数据持久化
})j

state.js

const state = {
	list:['1','2','3'],
    isShow:false,
    bool:true,
}

export default state

mutations.js

import * as Fun from './mutationsFun'	//*as默认导入的是一个对象
const mutations = {
	[Fun.set_List](state, list) {
		state.list = list//修改数据
    },
    [Fun.set_isShow](state, isShow) {
		state.isShow = isShow//修改数据
    },
    [Fun.set_Bool](state, bool) {
		state.bool = bool//修改数据
    }  

}

export default mutations

mutationsFun.js

export const set_List = 'set_List'
export const set_isShow = 'set_isShow'
export const set_Bool = 'set_Bool'

getters.js

export const list = state => state.list
export const isShow = state => state.isShow
export const bool = state => state.bool

actions.js

import * as Fun from './mutationsFun'
export const set_List= function (commit,list) {
	commit(Fun.set_List, list)
	commit(Fun.set_isShow, isShow)
	commit(Fun.set_Bool, bool)
}

路由封装

router文件夹下一个index.js 一个list.js 按需创建

//index.js
import Vue from "vue";
import VueRouter from "vue-router";
import routersList from "./list";
import HelloWorld from "@/components/HelloWorld";
Vue.use(VueRouter);
// 导入路由文件
const routes = [
  {
    path: "/",
    name: "HelloWorld",
    component: HelloWorld,
    redirect: "/index"
  },
  ...routersList//es6...托找运算符
];

const router = new VueRouter({
  routes
});

export default router;

//list.js
import msmk from "../views/msmk/msmk"; //底部tabbar
import index from "../views/msmk/index"; //首页
import course from "../views/msmk/course"; //课程
import record from "../views/msmk/record"; //约课记录
import practise from "../views/msmk/practise"; //联系

const routesList = [
  // 注册tabbar及子路由
  {
    path: "/msmk",
    name: "msmk",
    component: msmk,
    children: [
      {
        path: "/index",
        name: "index",
        component: index,
        meta: {
          title: "每时每课"
        }
      },
      {
        path: "/course",
        name: "course",
        component: course,
        meta: {
          title: "特约课"
        }
      },
      {
        path: "/record",
        name: "record",
        component: record,
        meta: {
          title: "约课记录"
        }
      },
      {
        path: "/practise",
        name: "practise",
        component: practise,
        meta: {
          title: "练习"
        }
      },
      {
        path: "/login",
        name: "login",
        component: login,
        meta: {
          title: "个人中心"
        }
      }
    ]
  },
  // 注册tabbar及子路由结束
];

export default routesList;