1. 程式人生 > >Vuex ,一個專為 Vue.js 應用程式開發的狀態管理模式

Vuex ,一個專為 Vue.js 應用程式開發的狀態管理模式

vuex : 狀態管理器,能夠管理你的資料狀態   作用:將資料交給state集中管理、分發。   應用:用於複雜的頁面,一個數據被多個頁面或者路由共享(互相互動),或者多層級資料互動時可以使用vuex     參考地址:https://vuex.vuejs.org/zh/

先安裝vue環境:vue create app

使用vuex步驟:   1.安裝:npm i vuex   2.引包:     引 vue 和 vuex 比如:       import Vue from 'vue';       import Vuex from 'vuex';
  3.引用:     Vue.use(Vuex)   4.new Vuex.Store({...})
new Vuex.Store({
        //你想要哪些資料被所有元件直接拿到就把這些資料放到state下
        state:{
            //初始化狀態
            count:10,
            注意:改變state中的引用型別的資料必須要讓資料直接發生變化(地址發生變化)
            比如:
                arr:[{id:xx,num:123}]

                {id:xx,num:
124} state.arr = [...state.arr] }, mutations:{ //改變資料的方法 add(state){ //這裡的state就是初始化狀態 //此處為改變state.xxx資料的程式碼... } //呼叫:this.$store.commit(mutations中的函式名,可以跟引數) //注意:在mutations下的操作都是同步的。 } })
  5:new Vue({        store      })

State驅動應用的資料來源

在輸出state的時候,可以使用輔助函式來簡化你的操作(不用也行)。

  1.import {mapState} from 'vuex'   2.(1) computed:mapState(['count'])   2.(2) 建議第二步使用這種:     computed:{       ...mapState(['count'])     }

 

getters (等同於computed):當資料發生變化的時候派生出另一個“事務”   view (檢視)層應用:     this.$store.getters.xxx   輔助函式:     mapGetters(['xxx'])

 

使用元件 - 第三方元件

 

actions(只要是這個資料的狀態需要被很多元件使用,並且此資料還是一個從後臺請求的資料(非同步資料)就要使用actions) actions:{ actionsName($store,可以跟引數){ //非同步環境之後使用 $store.commit('add',引數) } } view層使用: this.$store.dispatch('actionsName',傳參)

 

*/

 

/* vue常用的UI元件: https://www.cnblogs.com/theblogs/p/9964753.html