在vue-cli中使用vue-router及vuex的例子

在使用思维导图总结Vue.js官方文档（例子优化、难点及易错点注释）【下】 中我们使用 vue-router及vuex时引入它们的方式是直接以

Hello1.vue

//Hello1.vue

Hello2.vue

//Hello2.vue

由于我们在Hello2.vue使用了两个自定义组件qipa1-component和qipa2-component且import了相应的组件，因此我们在此也要完善这两个组件
qipa1Component.vue

qipa2Component.vue

接下来我们还为未匹配的路径单独写了个组件应对:

notFind.vue

5、修改App.vue内容

通过以上几个步骤，就可以实现了最开始的效果图啦。接下来我们来使用vuex；

二、在vue-cli中使用vuex

最终效果：通过Hello1.vue中的按钮来改变gettersMsg数据，从而使得只要用到gettersMsg的组件的数据都会相应改变；

GIF3.gif

1、 同样首先要确保安装了vuex

如果未安装，则将目录切换至vue-cli后执行 npm install vuex --save

2、创建vuex相关文件夹及文件

在src文件夹下新建store文件夹后，在store文件夹下新建如下文件:
index.js、mutations.js、actions.js、getters.js及rootState.js

3、修改src下的入口文件main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index'; //引入store

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store, //挂载store
  template: '',
  components: { App }
})

4、修改store/index.js

由于上面我们引入了store/index.js，因此接下来我们需要修改index.js文件:

import Vue from 'vue';
import Vuex from 'vuex';
import * as actions from './actions';  
 // * 表示将 './actions'模块中的所有接口挂载到actions对象上  as 表示别名的意思
import * as mutations from './mutations';
import * as getters from './getters';
import state from './rootState';
Vue.use(Vuex)
const store = new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})
export default store;

5、修改mutations.js、actions.js、getters.js及rootState.js

由于上面引用了这些文件，因此接下来我们来修改这些文件
rootState.js

const state = {
  msg: '我是原始数据',
}
export default state;

mutations.js

export const mutationsMsg = (state, payload) => {
  state.msg = payload.msg;
}

actions.js

export const changeMsg = ({commit}) => {
  commit({
    type: 'mutationsMsg',     //对应mutation.js中的mutationsMsg方法
    msg: '我是修改后的数据~~~'
  });
};

getters.js

export const gettersMsg = state => state.msg;

6、修改Hello.vue、Hello1.vue及App.vue

我们想通过Hello1.vue中的按钮来改变数据，因此Hello1.vue修改后的代码如下：

Hello.vue用来展示数据

当然，为了方便观察数据，你也可将App.vue修改下

最后，我将我的vue-cli 上传到github上了，有需要的可以看下。

参考资料:
vue-cli+webpack+router+vuex---之vuex使用

*本文版权归本人即笔名：该账户已被查封 所有，如需转载请注明出处。谢谢!