vuex

vuex

  • vuex
  • 全局狀態(tài)管理
    • 多組件共享狀態(tài)
      • 多個組件使用同一數(shù)據(jù) (state)
      • 任何組件發(fā)生改變 其他組件也要跟著發(fā)生相應的改變

核心概念

vuex

State

  • /ste?t/ z狀態(tài)

  • 在這里是全局狀態(tài)值

  • 在此配置項中可以放入數(shù)據(jù).在任意組件里打印this.$store.state.屬性名..都能取到該數(shù)據(jù)

    state:{
name:'韓杰'
},

  • 在任意組件中都可以使用.

     mounted () {
        console.log(this.$store.state.name)
    }

    • 也可直接渲染

      {{this.$store.state.name}}

Mutation

  • /mju??te??n/ 突變

  • 修改全局狀態(tài)值的方法必須寫在這里

    • 兩個參數(shù)
      • state中的數(shù)據(jù)
      • 接受的參數(shù)
    mutations: {
    changeName(state,params){
        console.log('修改的名字',state,params)
        //修改state數(shù)據(jù)的操作
        state.name  = params.name
    }
},

  • 觸發(fā)此函數(shù)

    • 直接使用$store.commit()觸發(fā)

      • 兩個參數(shù)

        • mutations里事件名

        • 傳遞的參數(shù)

           methods: {
        but(){
            this.$store.commit('changeName',{name:1223,pa:456})
        }
    }

    • 組件先觸發(fā)Action里的方法.再在Action里觸發(fā)mutations里的方法

      • 觸發(fā)Action里的方法
      methods: {
        changeAge(){
            this.$store.dispatch('changeAgeAction', {age:666})
        }
    }

      • 再在Action里觸發(fā)mutations里的方法

        actions: {
    changeAgeAction(context,params){
        console.log('觸發(fā)',context,params)
        //結構去除commit屬性
        let {commit} = context
        commit('changeAge',params)
    }
}

Action

  • /??k?n/ 行動

  • 要求網(wǎng)絡請求放到Action里

  • 通過dispatch方法觸發(fā)到action

  • action 在通過commit方法觸發(fā)mutations里的方法

  • 組件先觸發(fā)Action里的方法.再在Action里觸發(fā)mutations里的方法

    • 觸發(fā)Action里的方法
    methods: {
        changeAge(){
            this.$store.dispatch('changeAgeAction', {age:666})
        }
    }

    • 再在Action里觸發(fā)mutations里的方法

      actions: {
    changeAgeAction(context,params){
        console.log('觸發(fā)',context,params)
        //結構去除commit屬性
        let {commit} = context
        commit('changeAge',params)
    }
}

  • 統(tǒng)一異步管理.減少代碼量.

    • actions代碼
    actions: {
    changeNameActions({commit},params){
        console.log(params)
        setTimeout(()=>{
            commit('changeName',params)
        },1000)
        
    }
}

  • 組件調(diào)用

      methods: {
       change(){
          this.$store.dispatch('changeNameActions', {name:'韓杰123'})
           
       }
   }

  • 時間旅行

    • 是為了.有更準確的時間旅行時間

Getter

  • /'g?t?/

  • 類似于vuex里的computed計算器

  • 用來處理數(shù)據(jù)的.

  • 可以接受state數(shù)據(jù),然后對數(shù)據(jù)進行處理并返回

    getters: {
    double(state){
        return  state.age*2
    }
},

  • 在任意組件中的this.$store.getters.方法名來取到getters 里面方法return返回的數(shù)據(jù).也可直接渲染

    {{this.$store.getters.double}}

Module

  • 可以區(qū)分不同的模塊

  • 下面代碼就是區(qū)分了hehe,xixi兩個模塊

     modules:{
  //  呵呵模塊
   hehe:{
     namespaced:true, //開啟命名空間,打印出來的方法前面會顯示是屬于哪一個模塊
     state:{name:'韓梅梅'},
     mutations:{
       changeName(state){
         state.name='李雷雷'
       }
     },
     getters:{},
     actions:{}
   },
  //  嘻嘻模塊
   xixi:{
     state:{age:16},
     mutations:{
       changeAge(state){
         state.age=99
       }
     },
     actions:{},
     getters:{}
   }
 }
})

  • 注意state的使用會有所不同

    • 前面需要加上模塊名
      computed:{
    ...mapState({
      name:state=>state.hehe.name,
      age:state=>state.xixi.age
    })
  },

基本使用

  • 下載/安裝 npm install vuex

  • src下新建文件夾下js文件里創(chuàng)建全局狀態(tài)管理實例并拋出

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

Vue.use(Vuex)

let store = new Vuex.Store({

})

export default store;

  • 在main.js引入和注冊

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

  • 在組件中使用全局狀態(tài)值

    • 獲取渲染全局狀態(tài)值
      • 在配置項state里
    • 修改全局狀態(tài)值
      • 如果想修改全局狀態(tài)值必須在mutations

輔助函數(shù)

值類型向計算屬性里映射

  • 幫助我們減少代碼量

  • mapState

    • 將state映射到計算屬性上,,相當于取代this.$store.state這串代碼

  • mapGetters

    • 將getters映射到計算屬性上,,相當于取代this.$store.getters這串代碼

    • 注意要寫到computed計算屬性內(nèi)

      <template>
    <div>
       name:{{this.$store.state.name}}
       <button @click="change">組件1</button>
    //使用方式
       mapstate:{{name}}
       {{double}}
    </div>
</template>

<script>
import {mapState,mapGetters} from 'vuex'
export default {
   computed: {
      ...mapState(['name']),
      ...mapGetters(['double'])

   },

  • 其實上面的是簡寫..完整寫法是如下

    • 簡寫不能改名
    • 對象能自定義名字
    computed:{
...mapState(['name'])//使用的話使用{{name}}
//等同于
...mapState({hehe:(state)=>{//使用的話就使用{{hehe}}了
return state.name
}})
  //在es6中.如果箭頭函數(shù)后面直接return的話可以簡寫為
  ...mapState({hehe:state=>state.name})
  //如果屬性和屬性值一直可以省略屬性值
    ...mapState({name:state=>state.name})
    //等同于
     ...mapState({name})
    //在vuex要求寫成這樣
    ...mapState(['name'])
}

  • mapGetters的完整寫法

    • 也是簡寫不能自定義名字
    //簡寫
...mapGetters(['double'])
//完整寫法
...mapGetters({hehe:"double}")

函數(shù)類型向methods進行映射

  • mapMutations

    • 將mutation的值映射到 方法里

  • mapActions

    • 將actions里的值映射到方法里

  • 完整寫法和mapGetters一樣

    import {mapActions,mapMutations} from 'vuex'
export default {
   
   methods: {
      ...mapActions(['changeNameActions']),
       //完整寫法,只是如果屬性和屬性值一樣的話可以簡寫
       ...mapActions({hehe:'changeNameActions'}),
       
       //和上面完整寫法一樣
      ...mapMutations(['changeName']),
       change(){
          //this.changeNameActions({name:'趙四'})
          this.changeName({name:'王五'})
           
       }
       //如果如上代碼所示.change這個點擊事件的名字如果也叫changeName的話可以簡寫
       ...mapMutations({changeName:'changeName'})
    //接著簡寫就是
    ...mapMutations(['changeName'])
    //也可以改名字
       ...mapMutations({hehe:'changeName'})
    //在頁面上添加點擊事件就叫hehe就行了.
    <button @click = 'hehe'></button>
       
   }
}
最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容