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心得，具體遇到問題，后期完善