使用Vue2+vue-router+vuex构建项目

首先我们需要使用vue/cli来构建一个项目框架

vue create "项目名"

然后我们需要安装两个东西

//先通过npm来进行初始化项目
npm install
//然后通过npm来安装 vue-router和vuex
npm install -d vue-router
npm install -d vuex

项目开始

1. 我们要手动创建一个store的仓库文件夹和routers路由文件夹

2. 我们要在main.js中引入这两个文件夹(如果不写文件名称的化自动匹配index.js)

   import store from './store';
   import router from './routers';
   
   //之后同时在Vue实例中去全局声明这个文件
   new Vue({
     render: h => h(App),
     router,
     store
   }).$mount('#app')
   

3. 我第三步会选择首先配置路由文件

   //我们在routers中去创建一个index.js的文件
   //然后我们需要在文件中写入配置
   
   //1.引入
   import Vue from 'vue';
   import VueRouter from 'vue-router';
   //因为我们只需要这两个文件所以引入了这两个
   //如果说这里我们需要其他的文件 例如:导入模板也是使用import+from的方式来导入
   
   //2.注册插件
   Vue.use(VueRouter);
   //我们使用Vue.use()来注册插件
   
   //3.创建存放路由的数组
   const routes = []
   //然后创建静态变量 routes 他是一个数组 
   //我们要分清楚这个文件中的
   //routes:是路由的复数形式,意思就是写很多路由用的
   //router:是我们new的VueRouter的实例化对象 最后导出用的也是router
   
   //4.创建VueRouter的实例化对象 同时还要配置一些参数
   const router = new VueRouter({
   	//设置我们的路由模式为history模式
       mode: "history",
       //设置我们的页面的基路径 默认为"/"
       base: process.env.BASE_URL,
       routes
   });
   
   //5.导出router
   export default router;
   //这里的导出就对应了我们的main.js中的导入的以及全局声明的东西
   

4. 开始配置我们的Vuex仓库

   //在我们创建好的store文件夹中 创建一个index.js
   //我们在这里使用了封装 所以 我们还需要创建一些我们封装的文件.
   //如 
   //mutations : 在vuex中他是用来执行同步的存取state中的数据的地方,这里放的都是set方法
   //mutations-type.js : 这个是用来声明和导出全局的变量名的,因为我们在计算机中全局变量都是用大写
   //所以在这声明同时设置小写的样式 来进行匹配 让后使用 export 来逐个导出
   //state.js ：state是用来存储我们的数据的,在vue官档中这个东西叫做状态,因为他的英文翻译就叫做状态
   
   //1.首先在index.js中我们要引入一些文件
   import Vue from 'vue';
   import Vuex from 'vuex';
   //前两个是必要的所以就不解释了‘
   //后来两个是我们单独封装出去的模块,所以我们要将其引入进来来使用,因为一个程序只能有一个出入口
   //index.js就是我们vuex的出口
   import state from './state';
   import mutations from './mutations';
   
   //2.注册插件
   Vue.use(Vuex);
   //3.创建仓库
   const store = new Vuex.Store({
       // 状态 (在一个对象中如果键值相同 那么我们只用写一个)
       state,
       modules: {},
       // 同步修改状态中的参数
       mutations,
       // 异步修改状态中的参数(结束还是调用mutations中的方法)
       actions: {},
       // 过滤器
       getters: {},
   });
   
   //4.在我们创建好仓库后,我们就可以导出仓库了
   export default store;
   
   //5.我们已经将大纲写好,现在可以开始去写我们封装的模块了
   //	5.1 state 模块
   //	    我们在这个模块中只需要写我们仓库中索要填写的信息就可以了
   //	5.2 mutations 模块
   // 	    我们将这个模块和mutetions-type.js来放在一起说(后面就简称mtype)
   //	我们在mtype中去写入我们所需要的方法名
   export const SET_COUNT = "setCount"
   export const SET_COUNT2 = "setCount2"
   export const SET_COUNT10 = "setCount10"
   export const SET_CATEGORY = "setCategory"
   export const SET_CATEGORIES = "setCategories"
   //以此类推.这些方法都是我们等下要写入到mutations里面的方法
   // 5.3 正式开始写 mutations 模块
   //	   我们在这个模块中第一步还是要引入文件
   import Vue from 'vue'; //(Vue不必再说)
   import {
       SET_COUNT,
       SET_COUNT2,
       SET_COUNT10,
       SET_CATEGORY,
       SET_CATEGORIES
   } from './mutations-type.js';
   //     这里我们所引入的是mtype中我们定义的变量名,因为我们已经声明了 所以可以直接使用
   // 5.4 创建一个moules模块(这也是官档上vuex最后一个核心模块)
   //     首先我们先解释一下这个模块是干什么的
   //     这个模块可以用来创建一个仓库,他于其他的modules都是单独独立的,不受影响的 至于其他内容官当都有
   // 5.5 在创建完成之后 我们就可以写入我们的set方法了
   const modules = {
       [SET_COUNT]: (state) => {
           state.count++;
       },
       [SET_COUNT2]: (state, obj) => {
           state.count = state.count + obj.age;
       },
       //这里的value是如果我们不传参的话就使用默认的value的参数
       [SET_COUNT10]: (state, value = 10) => {
           state.count = state.count + value;
       },
       [SET_CATEGORY]: (state, category) => {
           state.category = category;
       },
       [SET_CATEGORIES]: (state, categories) => {
           Vue.set(state, "categories", categories);
       }
   }
   //举例了一些简单的set方法
   // 5.6 导出我们的模块
   export default modules;
   //至此我们的vuex仓库创建完毕
   

5. 修改App.vue

   //在我们的App.vue中
   //修改模板 
   //使用<router-link to=""></router-link>标签来使用路由
   //通过 <router-view></router-view> 来设置路由的显示窗口
   //其余不必多言
   

6. Vuex中操作值的方式

   //在前面我们配置了vuex的仓库,那么最重要的就是vuex的使用方法了
   //我们vuex一共有两种取值方式(目前所学的)
   // 6.1 vuex取值方式:
   //	   直接使用 $store.state.参数名 来取值,这样取来的值为只读属性,不可以进行修改
   //	   我们可以通过 mapState 的方式来映射到我们的组件中 但是也要使用引入的方式
   import { mapState, mapMutations, mapActions } from "vuex";
   //	   我们在映射过来后,可以在computed中使用
   ...mapState({
         // 我们可以在这中间使用设置别名的方式来在页面中取值
         abc: (state) => state.count,
         def: (state) => state.count,
         // 这也是设置别名的一种方式,后面的参数为变量名称
         countAlias: "count",
         countAddNum: (state) => state.count,
         category: "category",
         categories: "cotegories",
   }),
   // 6.2 方法的使用方式
   //	   我们可以在组件中去映射我们在 mutations,mapActions 中的方法
         // 我们这里用数组的方式去取他,如果我们想要取不同的models中的 可以在前面再加上一个路径的参数
       ...mapMutations([SET_COUNT, SET_COUNT2, SET_COUNT10]),
       ...mapMutations({
         // 这也是一种设置别名的方式
         cangeCount: SET_COUNT,
       }),
       // 映射 actions
       ...mapActions(["calc"]),
   // 注意:我们再映射进来的时候需要使用常量变量名,所以我们还要在 
   // script 标签的开头去引入我们声明的常量名
       import {
     		SET_COUNT,
     		SET_COUNT2,
     		SET_COUNT10,
     		SET_CATEGORY,
     		SET_CATEGORIES,
   	} from "../store/mutations-type";
   // 6.3 方法的调用方式
   //     通过我们前面的所学,我们知道我们一共有两个存放方法的地方
   
   //	   mutations : 是我们存放同步的方法的地方,整个vuex只有这个里面的方法可以修改 state 中的值
   //	   就连 actions 里面的方法也要最终放入 mutations 里执行
   //	   如果我们要调用 mutations 中的方法除了别名以外我们必须要使用 $store.commit("方法名") 的方式
   //	   调用
   
   //     actions : 是我们存放异步的修改 state 中的值的位置 但是我们这里的代码异步执行完毕后
   //	   还是会将其放入我们的 mutations 里执行！
   // 	   如果我们想要调用 actions 中的方法 也是除了别名以外 必须使用 %store.dispatch("方法名")
   
   // 6.4 我们在本章中还学习了父子之间的传递方法
   // 	   父传子 : 我们在父组件中的 子组件标签上使用 v-bind 来绑定一个 子组件要接收的变量名 他的值为
   //	   父组件中的参数. 例:
   	   <about :子组件要接收的变量名="父组件中的参数值" />
   //	   然后我们在子组件中添加一个 props的属性 该属性为一个数组,属性中的值为我们要接收的参数名
   	   props:["子组件要接收的变量名"] 
   
   //	   子传父 : 我们在子组件中可以使用 this.$emit("父级接收的自定义事件名",要传递过去的参)
   	   this.$emit("父级接收的自定义事件名", 要传递过去的参);
   //	   我们需要把他放在一个事件中去触发, 父级的写法为
   	   <Child @父级接收的自定义事件名="接收传参的函数名" />
   //	   让后我们需要在 methods 中定义一个接收方法
    	   接收传参的函数名("要传递过去的参") {
           	this.receiveData = "要传递过去的参";
          },
   // 	   通过上面的两个例子就明白了父子组件之间的传值了