使用Vuex的原因其作用與使用方法

一、為什么要使用vuex

1.1 直接舉例子直觀感受下：

此時我有5個控件1 2 3 4 5 其中 1是3子組件 2是4的子組件

 

 

當1要用3的數據時 可以直接傳遞 同理2用4的數據也可以直接傳遞，但1和2要用5的生成數據時 那就需要逐層傳遞, 此時就有點麻煩了，此處只傳遞2個控件 但設想一下 有10個控件需要傳遞呢？  

1.2 使用場景【狀態在組件間共享】

能解決多個界面間的共享問題，統一響應式管理

1. 用戶登陸狀態，用戶、名稱、頭像、地理位置等 可以保存狀態
2. 商品收藏，購物車物品等【可在關閉前統一上傳】
3. 需要共享的狀態信息

二、vuex使用方法

2.1 安裝vuex

　　在需要使用的路徑下執行 npm install vuex --save 安裝

2.2 store引入前提

• 在文件目錄下創建store文件 將vuex倉庫封裝在index.js中

　　　　　　

• index.js書寫【官方建議單一狀態樹，只將數據保存在一個store中】
  • 導入插件
  • 安裝插件
  • 創建對象
  • 導出對象

//index.js
//1.導入插件
import Vue from 'vue'
import Vuex from 'vuex'

//2.安裝插件
Vue.use(Vuex)

//3.創建對象
const store = new Vuex.Store({
    state:{            //共享的數據
        age:18
    },
    mutations:{    //同步方法    類似於methods 可接收傳入參數payload=》obj|arr|num
        increment(state,payload){
            state.age++;
        }
    },
    actions:{    //異步方法
        updateinfo(context){
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    context.commit('increment')
                    resolve()
                },1000)
            })
        }
    },
    getters:{        //將數據處理后返回    類似於computed 
        doubleage(state){
            return function(age){
                return age++;
            }
        }
    },
    modules:{//定義模塊
        a:{
            state:{},
            mutations:{},
            actions:{},
            getters:{}
        }
        
    }
})

//3.導出store模塊
export default store

 

 

下圖為官方給出的vuex執行流程

• 修改state數據只能通過mutation

• 異步操作只能放在action中  因此只能通過action調用mutation的方法再去修改state

•  注意vuex中數據 只能修改已存在屬性

　　　　不能直接用常規state.info['name']=cc添加 此為非響應式

　　　　只能Vue.set(state.info,'name','cc')　　　 此為響應式

 

2.3 頁面中使用

• 當要使用時第一步先得在main.js中導入
  • 等價於定義Vue.prototype.$store=store 在原型中加入屬性 所有頁面可以使用　　

//main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
import store from './store/index.js'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
    router,
    store
}).$mount('#app')

•  vue頁面使用
  • 注意點
    
    • 修改state數據只能通過mutation中的方法！！！！
    • 調用mutation中的方法需要用commit
    • 調用actions中的方法需要用dispatch
    • 皆有兩種方式調用store中的mutation與actions
      • 1.  (‘函數名',負載參數)　　　　【接收payload只包含payload】
      • 2.  ({

　　　　　　　　　　　　　　type:'函數名',　

　　　　　　　　　　　　　　payload1:'負載參數1',

　　　　　　　　　　　　　　payload2:'負載參數2',

　　　　　　　　　　　　})                                           【接收payload包含整個obj】

//test.vue
<template>
    <div id="test">
        <h1>{{$store.state.age}}</h1>　　　　　　　　<!-- 直接使用state數據 -->
        <button @click="add"></button>
        <h1>{{$store.getters.doubleage}}</h1>    <!-- 調用getters中函數 -->
        <button @click="update"></button>
    </div>
</template>

<script>
    export default {
        methods:{
            add(){        //調用mutations中函數
                let payload = 2
                //this.$store.commit('increment',payload)    此方法在后台直接接收payload
                this.$store.commit({    //此方法在后台接收整個obj對象{type,payload}
                    type:'increment',
                    payload
                })
            },
            update(){
                this.$store.dispatch('updateinfo').then(res=>{ //使用dispatch調用異步操作即actions中的函數
                    console.log(res)                           //返回的時promise對象對其進行操作
                })
            }
        }
    }
</script>

<style>
</style>