Vue + Vuex +Vue-router 整合的简单实现(入门)
看到网上很多关于单页面应用开发的入门贴都说“如果你的应用比较简单你,那么你可以不使用vuex(或者redux)”,但是作为初学者,这个又怎么能不学呢?
vue-vuex-demo 代码地址:https://github.com/NathanDing/vue-vuex-demo (如果对您的学习有所帮助,请star我一下)
下面我介绍一下demo的开发说明,有不对的地方请指正。
首先,介绍demo需要实现的功能:通过vuex修改页面的内容。
本次demo工程主要关注的文件与目录 ----demo_path/index.html:应用的入口文件,(为啥又是它?单页面应用开发不就是一个html么!具体为啥么……好像是要把配置文件暴露出来才能看到,不深究啦) ------------------------------------------------------------------------------------------------ ########## index.html代码如下 ########## <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue-vuex-demo</title> </head> <body> <!-- 这个div是应用的开始,请记住他的ID是:“app”(小写的哦,与“APP”是不用的) --> <div id="app"></div> </body> </html> ------------------------------------------------------------------------------------------------ ----demo_path/src ------------------------------------------------------------------------------------------------ ########## App.vue代码如下 ########## // 声明template(模板) <template> <div id="app"> <img src="./assets/logo.png"> <router-view/> <!-- router相关知识,此处作为路由出口 --> </div> </template> <script> export default { name: 'App' // 给它(模板)取了一个名字叫做“App” } </script> ------------------------------------------------------------------------------------------------ ########## main.js代码如下(本项目的核心文件,重要) ########## import Vue from 'vue' import App from './App' //引入组件App import store from './store' import router from './router' Vue.config.productionTip = false // 创建一个vue组件,这是一个根组件 new Vue({ /** 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。 * 可以是 CSS 选择器,也可以是一个 HTMLElement 实例。 * 在实例挂载之后,元素可以用 vm.$el 访问。**/ el: '#app', /** Vuex相关知识点,全局只有一个 **/ store, /** vue-router相关知识点,此处作为vue实例的一个选项 **/ router, /** 该实例包含的vue组件,“App” 指的是“import App from './App'”中的App **/ components: { App }, /** 该实例的的template(模板)指的是App.vue内的template **/ template: '<App/>' }) ------------------------------------------------------------------------------------------------ ########## ./store/index.js代码如下(本项目的store核心文件,暂时未涉及action) ########## // 组装模块并导出 store 的地方 import Vue from 'vue' import Vuex from 'vuex' // make sure to call Vue.use(Vuex) if using a module system Vue.use(Vuex) // 这个很重要 const myMutation = { increment: state => state.count++, changeName: (state, v) => { state.name1 = v }, decrement: state => state.count-- } // const myActions = {} const store = new Vuex.Store({ state: { count: 10, name1: 'vue1', name2: 'vue2' }, // actions: myActions, mutations: myMutation }) export default store