vue基礎(chǔ)入門之vuex安裝與使用

更新時間：2021年08月18日 12:40:07 作者：小黃雞1992

vuex是一個專為vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應(yīng)用的所有的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,這篇文章主要給大家介紹了關(guān)于vue入門之vuex安裝與使用的相關(guān)資料,需要的朋友可以參考下

1.什么是vuex

Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化.詳細(xì)介紹可以參照官網(wǎng)文檔vuex.vuejs.org/zh/

下面簡單介紹vuex

2.安裝和引入

先安裝vuex。

npm install vuex --save

在main.js中引入后即可使用。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//vuex使用
import Vuex from 'vuex'

Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        //全局變量
        count: 31231
    }
})

Vue.config.productionTip = false
    /* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    //vuex必須加入
    store,
    components: { App },
    template: '<App/>'
})

3.vuex的使用

<template>
<div>
      老大有{{showData}}
      <HelloWorld2/>
</div>
</template>

<script>
import HelloWorld2 from './HelloWorld2'
import son from './son'

export default {
name: 'HelloWorld',
data () {
  return {
       message2:"",
       cou
    }
},
components:{
  HelloWorld2,
  son
},computed: {
  showData(){
    return this.$store.state.count;
  }
}
}

</script>

<template>
<div>
老二有{{$store.state.count}}
</div>
</template>

<script>
export default {
name: 'HelloWorld2',
data() {
      return {
      }
    }
}
</script>

4.流程介紹

如圖當(dāng)沒有使用vuex時流程為： view->actions->state->view

使用了vuex后流程為vuecomponent->(dispatch)actions->(commit)mutations->(mutate)state->(render)->vuecomponent

5.mutation

狀態(tài)更改，更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交mutation。Vuex 中的 mutation 非常類似于事件：每個 mutation 都有一個字符串的事件類型 (type)和一個回調(diào)函數(shù) (handler)。這個回調(diào)函數(shù)就是我們實際進行狀態(tài)更改的地方，并且它會接受 state 作為第一個參數(shù)。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//vuex使用
import Vuex from 'vuex'

Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        //全局變量
        count: 31231
    },
    //更改狀態(tài)方法
    mutations: {
        //state為上面的state
        addData(state) {
            // 變更狀態(tài)
            state.count++
        }
    }
})

Vue.config.productionTip = false
    /* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    //vuex必須加入
    store,
    components: { App },
    template: '<App/>'
})

然后執(zhí)行更改

<template>
<div>
      老大有{{showData}}
      <HelloWorld2/>
      <button type = "button" v-on:click = "changeData">  修改按鈕    </button>
</div>
</template>

<script>
import HelloWorld2 from './HelloWorld2'
import son from './son'

export default {
name: 'HelloWorld',
data () {
  return {
       message2:"",
    }
},
components:{
  HelloWorld2,
  son
},computed: {
  showData(){
    return this.$store.state.count;
  }
},
methods: {
  //執(zhí)行更改
  changeData(event){
      this.$store.commit("addData");
  }
}
}

</script>

6.getters過濾

可以限制mutation 比如小于0就不能減少了

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//vuex使用
import Vuex from 'vuex'

Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        //全局變量
        count: 0
    },
    //更改狀態(tài)方法
    mutations: {
        //state為上面的state
        addData(state) {
            // 變更狀態(tài)
            state.count++
        }
    },
    //過濾
    getters: {
        getState(state) {
            if (state.count >= 5) {
                return 5
            } else {
                return state.count
            }
        }
    }
})

Vue.config.productionTip = false
    /* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    //vuex必須加入
    store,
    components: { App },
    template: '<App/>'
})

調(diào)用時

<template>
<div>
老二有{{$store.getters.getState}}
</div>
</template>

<script>
export default {
name: 'HelloWorld2',
data() {
      return {
      }
    }
}
</script>

7.Action--異步處理

Action 類似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接變更狀態(tài)。 Action 可以包含任意異步操作。 mutation只能同步處理
main.js。示例如下：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//vuex使用
import Vuex from 'vuex'

Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        //全局變量
        count: 0
    },
    //更改狀態(tài)方法
    mutations: {
        //state為上面的state
        addData(state) {
            // 變更狀態(tài)
            state.count++
        }
    },
    //過濾
    getters: {
        getState(state) {
            if (state.count >= 5) {
                return 5
            } else {
                return state.count
            }
        }
    },
    actions: {
        //action觸發(fā)的mutations方法 優(yōu)勢是異步處理
        addData(context) {
            //模擬異步
            setTimeout(() => {
                context.commit('addData')
            }, 1000)
        }
    }
})

Vue.config.productionTip = false
    /* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    //vuex必須加入
    store,
    components: { App },
    template: '<App/>'
})

在發(fā)送時應(yīng)該調(diào)用action。

<template>
<div>
      老大有{{showData}}
      <HelloWorld2/>
      <button type = "button" v-on:click = "changeData">  修改按鈕    </button>
</div>
</template>

<script>
import HelloWorld2 from './HelloWorld2'
import son from './son'

export default {
name: 'HelloWorld',
data () {
  return {
       message2:"",
    }
},
components:{
  HelloWorld2,
  son
},computed: {
  showData(){
    return this.$store.getters.getState;
  }
},
methods: {
  //執(zhí)行更改
  changeData(event){
      //操作mutations方法
      //this.$store.commit("addData");
      //應(yīng)該操作action而不是action觸發(fā)的mutations方法
      this.$store.dispatch("addData");

  }
}
}

</script>

8.Module

由于使用單一狀態(tài)樹，應(yīng)用的所有狀態(tài)會集中到一個比較大的對象。當(dāng)應(yīng)用變得非常復(fù)雜時，store 對象就有可能變得相當(dāng)臃腫。

為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割：

如路由可以分割文件不在main.js中放入vuex 新建store/index.js

//vuex使用
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        //全局變量
        count: 0
    },
    //更改狀態(tài)方法
    mutations: {
        //state為上面的state
        addData(state) {
            // 變更狀態(tài)
            state.count++
        }
    },
    //過濾
    getters: {
        getState(state) {
            if (state.count >= 5) {
                return 5
            } else {
                return state.count
            }
        }
    },
    actions: {
        //action觸發(fā)的mutations方法 優(yōu)勢是異步處理
        addData(context) {
            //模擬異步
            setTimeout(() => {
                context.commit('addData')
            }, 1000)
        }
    }
})

修改main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
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,
    //vuex必須加入
    store,
    components: { App },
    template: '<App/>'
})

我們還能把main.js中的state拿出新建store/state.js

export default {
    count: 0
}

然后index.js可以改成

//vuex使用
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'

Vue.use(Vuex)

export default new Vuex.Store({
    state: state,
    //更改狀態(tài)方法
    mutations: {
        //state為上面的state
        addData(state) {
            // 變更狀態(tài)
            state.count++
        }
    },
    //過濾
    getters: {
        getState(state) {
            if (state.count >= 5) {
                return 5
            } else {
                return state.count
            }
        }
    },
    actions: {
        //action觸發(fā)的mutations方法 優(yōu)勢是異步處理
        addData(context) {
            //模擬異步
            setTimeout(() => {
                context.commit('addData')
            }, 1000)
        }
    }
})