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放出來供大家下來研究。