vue傳值

vue中傳值的方式有？

1.父子組件

父組件-->子組件，經過子組件的自定義屬性：props
複製代碼

子組件-->父組件，經過自定義事件：this.$emit('事件名',參數1,參數2,...);
複製代碼

2.非父子組件或父子組件

經過數據總數Bus，this.$root.$emit('事件名',參數1,參數2,...)
複製代碼

vuex主要組成部分 （vuex 是更好非父子傳值方法）

• 1.state (相似存儲全局變量的數據)
• 2.getters (提供用來獲取state數據的方法相似於 Vue 中的 計算屬性（能夠認爲是 store 的計算屬性），getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算。)
• 3.actions (提供跟後臺接口打交道的方法，並調用mutations提供的方法) (Action 提交的是 mutation，而不是直接變動狀態。)
• 4.mutations (提供存儲設置state數據的方法)（處理數據的惟一途徑，state的改變或賦值只能在這裏）

只是作簡單的數據修改（例如n++），它沒有涉及到數據的處理，沒有用到業務邏輯或者異步函數，能夠直接調用mutations裏的方法修改數據。

具體使用

若是咱們項目中須要組件之間傳遞值的時候 在項目下單獨創建一個store-index.JS

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
let store = new Vuex.Store({
    // 1. state
    state:{
        ceshi:"説過"
    },

    // // 2. getters
    getters:{
        // 參數列表state指的是state數據
        getCityFn(state){
            return state.ceshi;
        }
    },
    // 3. actions
    // 一般跟api接口打交道
    actions:{
         setsgName({commit,state}, name){
            // 跟後臺打交道
            // 調用mutaions裏面的方法
            commit("setsg", name);
        }
    },
    // 4. mutations
    mutations:{
        // state指的是state的數據
        // name傳遞過來的數據
        setsg(state, name){
            state.ceshi = name;//將傳參設置給state的ceshi
        }
    }
});

export default store;
複製代碼

• 在main.js 引入導出的store

import store from './store/store.js';
複製代碼

• 組件中如何使用

(組件頁面中的city數據經過this.$store.getters來獲取store.js所寫getters提供的方法)

<template>
    <div class="home">
        <h1>{{ceshi}}</h1>
        <!-- 按鈕導航 -->
        <ul>
           <li v-for="(item,index) in shuiguoArr" @click="whosg(index)">
                <h2>{{item}}</h2>
            </li>
        </ul>
    </div>
</template>
複製代碼

<script>
export default {
  data () {
    return {
    shuiguoArr:['蘋果','香蕉','橘子']
    }
  },
  methods:{
      whosg : function(index){
          // 調用vuex的ations setsgName
          this.$store.commit("setsg", this.shuiguoArr[index]);
          ///this.$store.dispatch("setsgName", this.shuiguoArr[index])  // 經過異步方法
      
      }
  },
  computed:{
    ceshi:function() {
      // 經過vuex的getters方法來獲取state裏面的數據
      return this.$store.getters.getCityFn
    }
  }
}
</script>
複製代碼

vuex 輔助函數

• mapState （mapState:把state屬性映射到computed身上）

import {mapGetters,mapMutations,mapState,mapAction} from 'vuex'

computed:{
		// this.$store.state.n
         ...mapState({
            n:state=>state.n
            'n'
        })   
    }
複製代碼

• mapGetters （mapGetters:把getters屬性映射到computed身上）(當state中的屬性發生改變的時候就會 觸發getters裏面的方法)

// this.$store.getters.getCityFn
 ...mapGetters(["getCityFn"])
複製代碼

• mapActions

methods: {
  // 將this.add映射成 this.$store.dispatch('add')
  ...mapActions(['add']),  add mapActions下方法
  methodB () {
  	this.$store.dispatch('add',1)	 => this.add(1)
     
  }
}
複製代碼

• mapMutations

methods: {
  // 將this.add映射成 this.$store.commit('add')
  ...mapMutations(['add']),
  methodA () {
  	this.$store.commit('add',1)	 => this.add(1)
  }
}
複製代碼