要想使用vuex 第一步要先安裝vuex
命令行 : npm i vuex -S?
安裝后 在 src? 目錄下創(chuàng)建一個(gè)store 用來更改數(shù)據(jù)蚣驼,在文件夾下面創(chuàng)建兩個(gè)文件一個(gè)是index.js 文件 ,用來導(dǎo)出凿歼。
另一個(gè)是state 用來定義和管理數(shù)據(jù)
在index.js 中引入Vue 和 Vuex
同時(shí)引入本地的state
創(chuàng)建好store后 需要在main.js 中引入store 并將store寫入vue實(shí)例中
然后可以直接在自己的要顯示的 界面中用到store里的state 我在這里用Home.vue
當(dāng)我們?cè)赾omputed 中寫count 方法的時(shí)候 this.$store.state.count 的值就是我們?cè)趕tate中定義的count??
要想讀取到this count 不可以寫成箭頭函數(shù) 必須寫成 count () { }
在vuex 中自帶的mapState 可以直接返回?cái)?shù)據(jù)。 用 ...mapState(['count'])
此時(shí)需要在用到的頁面從vuex中引入mapState
在數(shù)據(jù)修改的時(shí)候有多種方式,函數(shù)可以直接寫在Home.js 中 還可以寫在store中
?在vuex 有一個(gè) mutations?
在vuex嚴(yán)格模式下唯一可以修改state值的地方
用來寫方法失晴。 將從state讀出的數(shù)據(jù)直接在mutations中來進(jìn)行修改并且返回。?
要調(diào)用的時(shí)候可以在 Home.vue 的methods 中添加一個(gè)add () {}方法? 用
this.$store.commit('inc') 來綁定? 這是手動(dòng)綁定 在react 中可以自動(dòng)綁定拘央。但是vue 不可以 自動(dòng)綁定
這句話也可以改成?
...mapMutation['inc'] 里面是字符串
當(dāng)在組件中 onclick中調(diào)用的時(shí)候 可以用 @click.native = "inc()"?
后面可以寫括號(hào)涂屁,并且可以傳遞參數(shù),會(huì)傳遞給mutations 方法的 第二參數(shù)
mutations 中的方法最多有兩個(gè)參數(shù)?
第一個(gè)就是state?
第二個(gè)就是傳遞進(jìn)來的參數(shù)灰伟。如果要傳遞多個(gè)參數(shù) 應(yīng)該使用對(duì)象的方式傳遞拆又。
多寫的參數(shù)不識(shí)別