看官方文檔看的一臉懵逼，后來看到了一篇比較容易理解的博文，大概寫下自己的理解

一、vuex是什么

是基于vue的狀態(tài)管理模式，一般用于解決大型項目中子組件向父組件傳遞數(shù)據(jù)的問題

二、基本概念

1、state

需要使用store的數(shù)據(jù)存儲在state里，并且在組件里通過this.$store.state.xxx訪問

import Vue from 'vue' import vuex from 'vuex' Vue.use(vuex);export default new vuex.Store({state:{show:false} })

2、mutations

$store.state.xxx一次只能操作一個state中的數(shù)據(jù)，如果需要同時操作state中多個數(shù)據(jù)，就需要使用mutations。

export default {state:{//stateshow:false},mutations:{switch_dialog(state){//這里的state對應著上面這個statestate.show = state.show?false:true;//你還可以在這里執(zhí)行其他的操作改變state }} }

在組件里，可以通過this.$store.commit('switch_dialog')觸發(fā)這個事件。官方文檔注明，在mutations中的操作必須是同步的，同時mutations是不區(qū)分組件的，如果在別的module中存在同名的函數(shù)，commit之后會一起觸發(fā)。

$store.commit()是可以額外傳入?yún)?shù)的，提交事件時可以直接傳入，也可以選擇對象風格

state:{show: false }, mutations:{switch_dialog(state, n){//載荷state.show = n} }
//傳參的時候可以 this.$store.commit('switch_dialog',true)
//也可以選擇對象風格 this.$store.commit({ type: 'switch_dialog' , n: true})

3、module

如果想?yún)^(qū)分不同組件的state，可以使用module

import Vue from 'vue' import vuex from 'vuex' import dialog_store from 'dialog_store.js' //引入對應組件的js文件 Vue.use(vuex);export default new vuex.Store({modules: {dialog: dialog_store //上面引入的模塊 } })

這樣就可以在對應組件的js文件里管理對應的狀態(tài)了(dialog_store.js)

export default {state:{show:false} }

在組件中可以通過this.$store.state.dialog.show訪問它

4、action

多個state操作需要通過mutations，那么如果是多個mutations的操作就需要通過action了，另外官方推薦異步操作要放在action里。

export default {state:{//stateshow:false},mutations:{switch_dialog(state){//這里的state對應著上面這個statestate.show = state.show?false:true;//你還可以在這里執(zhí)行其他的操作改變state }},actions:{switch_dialog(context){//這里的context和我們使用的$store擁有相同的對象和方法context.commit('switch_dialog');//你還可以在這里觸發(fā)其他的mutations方法 },} }

在組件里可以通過this.$store.dispatch('switch_dialog')觸發(fā)事件

5、getters

vuex的getters可以看作是vue中的computed，如果需要對state中某個屬性進行額外的運算，可以在getters中進行定義

export default {state:{//stateshow:false},getters:{not_show(state){//這里的state對應著上面這個statereturn !state.show;}},mutations:{switch_dialog(state){//這里的state對應著上面這個statestate.show = state.show?false:true;//你還可以在這里執(zhí)行其他的操作改變state }},actions:{switch_dialog(context){//這里的context和我們使用的$store擁有相同的對象和方法context.commit('switch_dialog');//你還可以在這里觸發(fā)其他的mutations方法 },} }

在組件中，我們可以通過this.$store.getters.not_show獲得這個狀態(tài)，getters中的狀態(tài)不可以直接進行修改，只能獲取它的值

6、mapState、mapAction、mapGetters

如果你覺得上面獲取狀態(tài)的寫法this.$store.state.xxx過于麻煩，畢竟我們平時獲取一個數(shù)據(jù)只需要寫this.xxx，可以選擇使用mapState、mapAction、mapGetters，下面引自上面提到的那篇博文

以mapState為例

<template><el-dialog :visible.sync="show"></el-dialog> </template><script> import {mapState} from 'vuex'; export default {computed:{ ...mapState({show:state=>state.dialog.show}),} } </script>

相當于

<template><el-dialog :visible.sync="show"></el-dialog> </template><script> import {mapState} from 'vuex'; export default {computed:{show(){return this.$store.state.dialog.show;}} } </script>

mapGetters、mapActions 和 mapState 類似 ，mapGetters?一般也寫在computed中 ,?mapActions?一般寫在?methods?中。

三、安裝和使用方法

安裝 vuex ：

npm install vuex --save

然后為了方便管理，可以在src/下創(chuàng)建一個store文件夾，創(chuàng)建一個index.js,?:

import vuex from 'vuex' Vue.use(vuex); var store = new vuex.Store({ state:{show:false} })

再然后 , 在實例化 Vue對象時加入 store 對象 :

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

完成到這一步 , 上述例子中的?$store.state.show?就可以使用了。

?

轉載于:https://www.cnblogs.com/sue7/p/9805384.html

總結

以上是生活随笔為你收集整理的vuex的个人理解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。