Vuex是什麼主要用來做什麼為什麼要使用vuex

一、Vuex是什麼

Vuex是一個大管家，多個組件共享的變量全部存儲在一個對象裡
將這個對象放在頂層vue實例中，讓其他組件使用，如下圖為多頁面

二、Vuex的五個屬性

state：vuex的基本數據，用來儲存變量
getter：從基本數據（state）派生的數據，相當於state的計算屬性（computed）
mutation：提交更新數據的方法，必須是同步，美國mutation都有一個字符串事件類型（type）和回調函數（handler）
action：和mutation的功能大致相同，不同之處在於（action提交的是mutation，不是直接變更狀態；action包含任意異步操作）
module：模塊化vuex，可以讓每一個模塊擁有自己的state，mutation，action，getters

三、Vuex狀態管理開發

3.1 state & mutations

npm install vuex --save

//store文件夾下  新增index.jsimport Vue from 'vue'
import Vuex from 'vuex'//vuexVue.use(Vuex)const store = new Vuex.Store({//Vuex.Storestate: {//管理的状态对象counter: 1000,},mutations: {//只能包含同步的代码, 不能写异步代码increament(state) { state.counter ++;}}
})export default store//在main.js全局註冊
import Store from './components/store/index'
new Vue({el: '#app',router: router,i18n: '',Store,components: { App },template: '<App/>',})//在使用的頁面<button @click="addition">+</button>
<p>{{$store.state.counter}}</p>computed:{counter:function(){return this.$store.state.counter}},
methods:{addition(){this.$store.commit('increament')}
}

3.2 getters相當於state的計算屬性（computed）

state: {student:[{ id: 111, name: "kk", age:18 },{ id: 121, name: "kko", age:28 },{ id: 131, name: "kkoo", age:38 },{ id: 141, name: "kkpo", age:8 },]},getters: {more20Stu(state) {
//找出大於18歲的數據return state.student.filter(s => s.age >  18)},}

mutation 只能通過其他方式來更新屬性未定義的內容

//在使用的地方<p>{{$store.state.info}}</p>
<button @click="addInfo">更新用戶</button>addInfo(){this.$store.commit('upInfo')},//index.jsinfo: {id:151,name:"kkk",age:35}upInfo(state) { Vue.set(state.info,'address','los')Vue.delete(state.info,'age')}

3.3 mutation提交更新數據的方法，必須是同步，如下為異步，就無法做到響應式

increament(state) { setTimeout(()=>{state.counter++;},1000)},

3.4 actions（為了解決異步如上圖頁面顯示和數據不同步的問題，將actions dispatch 給mutation更新）

//index.js
actions: {//異步操作aUpdateInfo(context,payload) { setTimeout(() => { context.commit('upInfo');payload.success();payload.message},1000)}}
upInfo(state) { Vue.set(state.info, 'address', 'los');}//在使用地方<button @click="updateInfo">更用戶</button>updateInfo(){this.$store.dispatch('aUpdateInfo',{message:"message",success:()=>{console.log('ok')}})},

3.5 mutation 常量類型


//index.jsmutations: {//只能包含同步的代码, 不能写异步代码increament(state) { state.counter ++;}
}//mutation-types.js 導出
export const INCREAMENT = 'increament'//使用地方引用
import {INCREAMENT} from './store/mutation-types'addition(){this.$store.commit(INCREAMENT)},

3.6 module （模塊） vuex 允許我們將store分割成大大小小的對象，每個對象擁有自己的state，getter，action，mutation，這個對象叫module

const moduleA={state: {count:0 },getters: { fiveCount(state) {return state.count + 5}},mutations: { increment(state) {state.count++}},actions: {ifcrementRootSum({state,commit,rootState }) {if ((state.count - rootState.count) * 2 === 1) {commit('increment')}}}
}export default moduleA//使用的地方引用
import moduleA from './module/moduleA';export default new Vuex.Store({modules: {moduleA},// ...
}

Vuex是什麼主要用來做什麼為什麼要使用vuex相关推荐

閱讀10大優點：為什麼你應該每天閱讀
閱讀10大優點:為什麼你應該每天閱讀當是你最後一次讀一本書,或主要雜誌上的文章?你的日常的閱讀習慣圍繞推特,Facebook的更新或速溶燕麥片包上的指示?如果你是其中之一,無數的人誰不經常閱讀的習慣 ...
繁体字非主流伤感日志_親愛的,為什麼
繁体字非主流伤感日志_親愛的,為什麼 - 繁体字非主流伤感日志_親愛的,為什麼親愛的,請問,當我對妳說我愛妳的時候.妳的心裡冇我嘛?- 親愛的,請問,在妳知道我背上冇一道疤時.妳對我的關心是罘是真的 ...
BRICs---看看印度工程師為什麼那麼強
BRICs---看看印度工程師為什麼那麼強作者:官振萱天下雜誌有七成人口是文盲的印度,卻是全球軟體人才的培育重鎮,貧窮的印度,憑什麼培養出全球炙手可熱的軟體工程師?怎樣的教育方式,能讓學生一出校 ...
你知道菩薩為什麼靈驗，香火不絕嗎？(主管必讀)
我剛升上總經理職位的時候,很不習慣沒有直接指揮的單位, 也很不習慣沒有直接負責的工作,因此,沒事就召集各個郀I單位開會, 直接參與各個單位的咦鳎?輳肺揖褪遣块T主管一般. 直到有一天,一個部門主管告訴 ...
那xxx.class.getName()為什麼能這樣寫?? 看了半天都快搞不清楚到底在程式中的example到底是class ? object ? 還是instance了
bunny wrote: 這就是為什麼 Java 需要去定義寫作規範的問題了一般來說, Java 會建議你 Class 的名稱, 首字要大寫而該 Class 的實體, 就是 instance 可以 ...
(原創) 為什麼企業研發喜歡找研究生? (日記)
我常常在想,大學生跟研究生有什麼差別?為什麼研發喜歡找研究生呢? 首先看看大學生怎麼唸書,大學生基本上修的課都有課本,也就是說,只要把課本念好搞懂,基本上就沒問題了,而課本都是大師整理好的東西,有範例 ...
(原創) 為什麼VB有Dim obj As Foo = New Foo()這種語法? (初級) (Visual BASIC)
Abstract 以前在寫VB/VBScript時,一直不了解為什麼VB提供兩套New語法,Dim obj As New Foo()和Dim obj As Foo = New Foo(),尤其後者,重 ...
计算机考研877难不难,計算機方向考研全都是統考嗎?為什麼有的學校專業課是877,有的是850呢?不全都是408嗎?...
計算機方向考研全都是統考嗎?為什麼有的學校專業課是877,有的是850呢?不全都是408嗎?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶 ...
充電到 100 %時，為什麼 Vbat 只有 4.2V？
Original. 今天有同事問說, 充電電壓不是 4.35V 嗎? 充電到 100 %時,為什麼 Vbat 只有 4.2V? 可能有三種原因. 溫度. safety 會在某個溫度區間,使用較低的電壓 ...

Vuex是什麼主要用來做什麼為什麼要使用vuex

Vuex是什麼主要用來做什麼為什麼要使用vuex相关推荐

最新文章

热门文章

Vuex是什麼 主要用來做什麼 為什麼要使用vuex

Vuex是什麼 主要用來做什麼 為什麼要使用vuex相关推荐

最新文章

热门文章

Vuex是什麼主要用來做什麼為什麼要使用vuex

Vuex是什麼主要用來做什麼為什麼要使用vuex相关推荐