vue-cli中配置vuex流程和注意事项

本文目录

1. vue-cli下新建站
2. 配置路由更改HelloWorld.vue组件到新建Home.vue组件
3. 安装vuex
4. 测试是否安装成功vuex
   
   一：vue-cli下新建站
    a)新建文件夹vuexStudy
   b)进入命令窗口：

   vue init webpack  

   特别引调，输入站点名称不能为vuex
   　　一路默认执行，创建vue-cli下的webpack模板站点

    npm run dev
   

   　　在浏览器中，输入http://localhost:8080 (确保你自己端口号)，确认成功后进行下这vuex安装
   二：安装vuex(
   备注：
   　　1)安装vuex前，可以考虑清空HelloWorld.vue内容，也可采用新建一个空组件(即去掉视图模板<template></template>无关干扰列表等住处)如新建home.vue
   　　home.vue文件如下

   <template>
     <div class="Home">
       {{msg}}
     </div>
   </template>
   <script>
   export default {
     data () {
       return {
         msg: 'Home.vue 组件'
       }
     }
   }
   </script>
   

   　　2）配置路由文件/router/index.js 更改helloWorld.vue为home.vue
   　　配置路由.index.js添加如下文件

   import Vue from 'vue'
   import Router from 'vue-router'
   import Home from '@/components/Home'
   
   Vue.use(Router)
   
   export default new Router({
     routes: [
       {
         path: '/',
         name: 'Home',
         component: Home
       }
     ]
   })
   

网址中输入浏览:http://localhost:8080  

出现如下内容，说明配置路由更改helloWorld.vue组件到home.vue

a)安装命令
　　

npm install vuex --save

b)配置
 在 main.js配置入口中，配置 vuex如下

import Vuex from 'vuex'
Vue.use(Vuex)

三：测试是否安装成功Vuex
a)新建文件夹与文件
 b)main.js入口配置文件中，配置vuex
 c)组件home.vue调用state选项，保存在文件rootState.js的变量

备注：如果在项目中需要配置的vuex选项很多，我们则应该把vuex的相关代码分割到不同模块

a)新建文件夹与文件
a)在src下新建store文件夹，在文件夹中创建如下几个文件

 rootState.js  对应核心概念 state选项
 getters.js  对应核心概念 getter选项
mutation.js  对应核心概念  mutations选项
 action.js  对应核心概念  actions选项
index.js 整合如上各个模块，创建并导出vuex实例
我们可以随意设置如上文件名，但最好可以通过文件名就能判断出这个文件是用来干嘛的

index.js中代码如下
强调:import Vue from 'vue'  此导入第二个vue要全部小写，不则配置找不到变量

import Vue from 'vue';
import Vuex from 'vuex';
import state from './rootState.js';
import getters from './getters.js';
import mutations from './mutations.js';
import actions from './actions.js';

Vue.use(Vuex);
const store = new Vuex.Store({
    state,
    getters,
    actions,
    mutations
});

export default store;

b)store文件夹下，四个文件（rootState.js    getters.js        mutations.js  actions.js）配置都差不多一样，以rootState.js为例
 rootState.js代码如下

/**
 * 此文件除声明变量,还可声明数组
 *  */
const state = {
  count: 0,
  firstName: '姓张',
  lastName: '名许',
  student: ['张三', '李四', '王二']
}
export default state

b)main.js入口配置文件中，配置vuex

首先：main.js文件

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index'; //导入store下配置的vuex相关文件

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,//引用store
  components: { App },
  template: '<App/>'
})

再次：到home.vue中调用rootState.js变量
思路分析两点：
通过computed:{}选项来引用文件rootState.js文件中变量，代码如下

<template>
  <div class="Home">
    <p>测试home.vue组件配置成功否:{{msg}}</p>
    <p>引用state选项一个变量:{{count}}</p>
    <p>引用state选项两个变量组合:{{fullName}}</p>
    <p>引用state选项中的数组:{{students}}</p>
  </div>
</template>
<script>
export default {
  name: 'Home',
  data () {
    return {
      msg: 'Home.vue 组件'
    }
  },
  computed: {
    // 调用是vuex,state选项文件rootState.js中声明变量
    count () {
      console.log('this结构:' + this.$store.state.count)
      return this.$store.state.count
    },
    // 调用是vuex,state选项文件rootState.js中声明变量
    fullName () {
      console.log('this结构:' + this.$store.state.firstName)
      return this.$store.state.firstName + this.$store.state.lastName
    },
    students () {
      return this.$store.state.students
    }
  }
}
</script>

 个人首次配置vuex心得，具体遇到问题，后期完善