vuejs學習——vue+vuex+vue-router項目搭建(三)

前言

　　vuejs學習——vue+vuex+vue-router項目搭建(一)

　　vuejs學習——vue+vuex+vue-router項目搭建(二)

　　爲何用vuex：組件之間的做用域獨立，而組件之間常常又須要傳遞數據，項目比較小的話傳遞數據還好，越大的項目，涉及的組件通訊就越多、越頻繁，此時管理起來就會很是累，並且容易出錯，這就是 Vuex 的意義所在。它能夠將數據置於單獨的一層，並提供給外部操做內部數據的方法。粗俗一點，就這樣理解吧。vuex1.0官網

Vuex下載 

$ cnpn install  vuex@1.0 --save

　　如今使用vue1.0的生態的話都要加上版本號，不是默認都是最新版本，而vue1.0只能配合版本1來使用。

Vuex引入

　　接下來咱們在vuex文件夾新建 store.js(初始化的 state 對象)和actions.js（定義動做）

　　store.js代碼以下：

//引入相關文件
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//定義初始化變量
const state = {
    list:[{
        name:'張三'
    }],
    count:0
}
//定義動做
const mutations = {//模仿ajax獲取新數據後 動態更新data
    GETLIST (state, amount) {
        state.list = amount
    },
    //官方例子，加減
    INCREASE(state, amount){
        state.count=state.count+amount
    },
    REDUCE(state,amount){
        state.count=state.count-amount
    }
}

export default new Vuex.Store({
    state,
    mutations
})

　　actions.js代碼以下：

export const listsCounter = function ({ dispatch, state },list) {//list爲調用increment方法所傳的值
  dispatch('GETLIST', list)
}
export const increaseCounter = function ({ dispatch, state }) {
  dispatch('INCREASE', 1)
}
export const reduceCounter = function ({ dispatch, state }) {
  dispatch('REDUCE', 1)
}

　　最後咱們在main.js文件引入store

import store from './components/vuex/store'
//Vue中加入store

　new Vue({
　　　store,
　　　components: { App }
　})

 Vuex使用　

　　咱們須要修改根組件來讓應用注意到 store 的存在位置。 [vuex] store not injected. make sure to provide the store option in your root component.  若是沒有在根組件引入控制檯會提示這個警告

　　App.vue文件中引入store

　　import store from './components/vuex/store'
    export default {
        store: store
    }

 

　　引入完後，咱們打開第二章裏建的MenuLeft.vue文件。個人思路以下圖

　ok，咱們開始吧，引入 store文件

　template中加入

　　<li v-for='el in data'><a ><i class="fa fa-home"></i><span class="nav-label">vuex動態改變：{{el.name}}</span></a></li>
　　<li><a><i class="fa fa-home"></i>{{countValue}}</a></li>

　import store from '../vuex/store'
    export default {
        components: {
            User
        },
        data(){
            return{
                datas:[]
            }
        },
        methods:{
            go(el){
                this.$route.router.go({
                    path: el
                })
            },
            
        },
        store:store,
        vuex: {
            getters: {
              data: state => state.list,  //獲取咱們剛剛在store文件中定義的list數組對象
              countValue:state => state.count //獲取count變量，用於顯示加減改變的值
            }
        },
    }

　　ok，如今能夠看看效果了，順利的話，你應該和下圖是同樣的

　　接下咱們就開始寫方法，動態改變list吧，進入AsideHeade.vue 文件，引入actions.js

import { listsCounter } from '../vuex/actions'
    export default {
        data() {
            return {
                ab:[{
                    name:'王五'
                }]
            }
        },
        methods: {
            change(){
                this.setlist(this.ab)
            }
        },
        vuex: {
            actions: {
              setlist: listsCounter
            }
        }
    }

　　大家能夠試試點 看看左側導航是否是發生改變了，是否是感受vuex仍是挺不錯的，哈哈。

　　咱們還有一個加減的例子，我想留在你們在看官網的同時實現出來，樣式下圖。

　　三篇vue項目搭建就完了，相信你們已經能夠本身搭建出來了，demo放出來供你們下來研究。