vue全家桶+Koa2開發筆記(1)--vuex

1.  安裝webpack的問題： webpack坑系列--安裝webpack-cli

2.  vue-cli（vue腳手架）超詳細教程

3.  在命令行中使用 touch 執行新建文件；

4.  關於Vue.use()詳解  

5. vuex 最簡單的介紹

  目錄如左側所示，主要是標紅的三個文件。

5.1 store文件，編寫vuex的各個功能，包括：

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { // 定義狀態數據
  count: 2 } const mutations = { // 定義方法，操做數據
 increment (state) { state.count++ }, decrement (state) { state.count-- } } const actions = { add: ({commit}) => { // 觸發上述的方法,對外提供的方法接口,能夠在這裏提供異步操做
    commit('increment') }, reduce: ({commit}) => { commit('decrement') } } export default new Vuex.Store({state, mutations, actions})

5.2 而後在main文件中，引入store 注意這裏是小寫的store

import Vue from 'vue' import App from './App' import router from './router' import store from './store' Vue.config.productionTip = false

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

5.3 最後在vue文件中調用：

<template>
    <div>
        <h1>{{ $store.state.count }}</h1>
        <button type="button" @click="add">增長</button>
        <button type="button" @click="reduce">刪減</button>
    </div>
</template>
<script> import { mapActions } from 'vuex' export default { methods: mapActions([ 'add', 'reduce' ]) } </script>

注意：在5.2中掛在元素時，加入的store，才能在接下來的文件中，引用到 $store

 

6.  mapState 的使用方法   （文章標題：   state,mapState,...mapState對象展開符詳解 ）

注意的是： 用data接收的 $store 不能及時響應更新,用computed就能夠.

 

7. 多個組件使用不一樣的vuex：

主要涉及上面三個地方，其中

一、  main.js 主要用來引入註冊 store，

二、 store文件夾下定義不一樣頁面或組件對應的 vuex數據，而且有index來進行統一的對外輸入，

三、 componments文件夾喜好定義的a和b等組件是html範疇，調用vuex

具體以下所示：

（1）main文件引入 store的index文件以下所示：

import Vue from 'vue' import App from './App' import router from './router' import store from './store/index.js'//注意這裏引入的是store文件夾下的index文件
Vue.config.productionTip = false

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

    (2) index文件 引入a和b文件

import Vue from 'vue'; import Vuex from 'vuex'; import moneys from './modules/a' import counts from './modules/b' Vue.use(Vuex)//安裝註冊vuex
 export default new Vuex.Store({//實例話vuex，並引入兩個vuex定義的函數
 modules:{ moneys, counts } })

 

（3）store文件夾下的a.js

const state = {//定義state
  money: 10
}

const mutations = {//定義操做數據方法
  add(state,parmas) {//接受傳參的方法
    state.money+=parmas;
  },
  reduce(state) {
    state.money--
  }
}

const actions = {//定義外部接口，包括異步處理
  add: ({commit},parmas) => {//注意這裏的傳參方式
    commit('add',parmas)
  },
  reduce: ({commit}) => {
    commit('reduce')
  }
}

export default {//拋出定義的函數和開啓命名空間
    namespaced:true,   //用於在全局引用此文裏的方法時標識這一個的文件名

state, mutations, actions }

對應的b與其相似。對外的index文件以下：

import Vue from 'vue'; import Vuex from 'vuex'; import moneys from './modules/a' import counts from './modules/b' Vue.use(Vuex)//安裝註冊vuex
 export default new Vuex.Store({//實例話vuex，並引入兩個vuex定義的函數
 modules:{ moneys, counts } })

（4）對應的vue調用vuex

<template>
<div class="box">
    <div>{{$store.state.moneys.money}}</div><!-- 注意這裏調用到的state值，須要帶上命名空間moneys-->
    <button @click="add(2)">增長</button>
    <button @click="reduce">減小</button>
</div>
    
</template>
<script>
import {mapActions} from 'vuex'
export default {
    methods: mapActions('moneys',['add','reduce'])//注意這裏的命名空間 moneys
　　//  傳遞多個參數的時候 寫成一個對象

}
</script>this.$store.dispatch('delTask', {task, index});

如下兩個方式同樣：

changeTab(index){ this.$store.dispatch('leftNav/changeTab',index) //left是命名空間，index是傳遞的參數 }, //...mapActions('leftNav',['changeTab'])

分發事件和常規事件混合方法：

methods: { ...mapActions('a',['changeData']), //注意這裏要寫上...符號
        triger:()=>{ alert(1); } }

附：   超簡單入門Vuex小示例