第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

Vuex：狀態(tài)管理模式，管理前端狀態(tài)；

vue所有東西是是組件化的，組件的數(shù)據(jù)狀態(tài)狀態(tài)存儲于本地對象中或者全局對象中，Vuex就是存在了全局對象中；

Vue和Vuex的數(shù)據(jù)狀態(tài)是響應式的；

Vuex就是存儲著響應式數(shù)據(jù)狀態(tài)的全局對象。

v-if

v-for="item in list"

state 數(shù)據(jù)倉庫

getter 獲取數(shù)據(jù)

mutation 修改數(shù)據(jù)

action 提交mutation

model

組成部分

state ----- 數(shù)據(jù)來源；

getter ----- 改變state；

mutation ----- 同步修改state；

action ----- 異步修改state；

多組件，數(shù)據(jù)共享；

數(shù)據(jù)狀態(tài)的讀，改；

管理。

state —— 數(shù)據(jù)倉庫

getter —— 用來獲取數(shù)據(jù)

Mutation —— 用來修改數(shù)據(jù)的

Action —— 用來提交mutation

安裝Vuex

1、安裝vuex包：npm install vuex

2、創(chuàng)建vuex實例：new Vuex.store()

3、main.js中將vuex實例掛載到vue對象上

Vuex的組成介紹

①State——數(shù)據(jù)倉庫

②getter——用來獲取數(shù)據(jù)的

③Mutation——用來修改數(shù)據(jù)的

④Action——用來提交mutation

//count++實戰(zhàn)
main.js中
1.state中創(chuàng)建count字段
import?Vuex?from?"vuex"
Vue.use(Vuex)
const?store?=?new?Vuex.Store({
????state:{
????????count:0
????}
})
new?Vue({
????store,
????...
})
2.mutations中創(chuàng)建一個count++的mutation
const?store?=?new?Vuex.Store({
????state:{
????????count:0
????}，
????mutations:{
????????countIncrease(state){
????????????state.count++
????????}
????}
})
mutations實現(xiàn)了，
然后在頁面模板里面拿到這個state的count，
在app.vue這個組件里面
this.$store.state.count

ps:如何獲取vuex中state的數(shù)據(jù)？
①直接通過vue?store這個實例??this.$store.state.count?4'50
②通過vuex提供的...

3.button新增click事件觸發(fā)mutation改變count
<button?@click="countIncrease">點我自增</button>

countIncrease(){
????this.$store.commit("countIncrease");
}

擴展：commit的第二個參數(shù)使用
在main.js中
mutations:{
????????countIncrease(state，v){
????????????state.count?=?v；
????????}
????}
在app.vue中
countIncrease(){
????const?v?=?100；//自定義的值
????this.$store.commit("countIncrease"，v);
}

vuex 的demo

vuex

Vuex的組成介紹

State--數(shù)據(jù)倉庫

代表的數(shù)據(jù)狀態(tài)的來源，一般的來說vuex所有的數(shù)據(jù)都會存在state當中，它就像一個很大
數(shù)據(jù)倉庫，用來存儲我們vuex的所有狀態(tài)數(shù)據(jù)，所以state就是我們數(shù)據(jù)的唯一來源。

state可以實例化用來存儲所有的數(shù)據(jù)，它是如何存儲的？
實際上state就是一個比較復雜的或者是一個龐大的對象。它本身是一個json對象，
用來存儲我們所有數(shù)據(jù)。

getter--用來獲取數(shù)據(jù)的

其實我們可以通過實例化state來拿到所有的數(shù)據(jù)，但是新加的getter肯定有它自己的作用，
它就好比vue的computed

Mutation--用來修改數(shù)據(jù)的

需要commit一個Mutation來修改，這樣就可以對狀態(tài)的修改進行一個歷史的記錄，
方便于監(jiān)聽以及回滾等
mutation的本質實際上就是一個funtion
Mutation的操作是同步的，異步的話會有很大的麻煩，具體的可以去詳細的看一下官方的文檔；

Action--用來提交mutation

Action可以進行異步的操作