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

本文目录

vue-cli下新建站
配置路由更改HelloWorld.vue组件到新建Home.vue组件
安装vuex

测试是否安装成功vuex

一：vue-cli下新建站
a)新建文件夹vuexStudy
b)进入命令窗口：

vue init webpack

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

1	`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
    }
  ]
})

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

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

a)安装命令
　　

1	`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>