|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
Vuex 的用法详解2 K) l6 _" g$ {" ?9 Z5 G: W) g
: H- K/ b7 a' i$ h+ N3 D) K本案例测试下Vuex的使用,创建一个新的web项目( b: z, o9 P8 Z- y
Vue init webpack web
B' V. G0 Y2 l3 ], x9 A# o安装vuex) R5 ~" e* p. J( Y1 k$ ]7 D
npm install vuex --save
* v4 I) u$ e9 v( G G2 E [/ ?; v/ R7 y启动, npm run dev,打开localhost:8080 即可, ~# W5 U9 o( X* C" \8 Q
! T* q5 F* Q5 f9 V+ [# S
3 C/ K5 v4 K% ](1)引入vuex
$ L, v- J. ]' v( m& Y2 M j0 X: Q$ t创建一个src/store文件夹,创建index.js , 引入并导出store
$ E z7 d+ e$ E2 n0 Zimport Vue from 'vue'
! W8 o& ~4 M. P1 T2 E/ S' \- A" Oimport Vuex from 'vuex'
) c, i( i) G' N" Q5 T) v# E# QVue.use(Vuex); ^1 I, S" Y0 {* Q# k7 u. F
const store = new Vuex.Store({
! N2 U- }& e1 U8 j})
U* U% U, c$ z" B8 L. u1 L5 Q8 {. {export default store;& D# Q$ A4 F/ |' \
8 }7 s4 V5 c! y( E9 t3 N(2)引入store到main.js8 n- Z, `) x5 _( X) t0 A, q" ^
import Vue from 'vue'
; ~1 @/ m9 f6 x' ]& g y6 Kimport App from './App'/ W5 U0 ~8 ? J2 g3 w9 R
import store from './store'
) z6 b& l2 B5 E4 b: _2 M/ q% F
. f! R1 u: V' o/ p) x4 DVue.config.productionTip = false& K) D0 S0 I' ]+ f
: O/ E- u4 n+ ~4 e& v$ p7 [/* eslint-disable no-new */8 q; m1 u. ^# U% H9 `1 ?
new Vue({% @2 v2 d- f- r2 J* F+ Q
el: '#app',( S7 j6 E& x" W0 e
store,, J- k5 q( o. w4 \3 W9 j2 U. P
components: { App },
" e& f8 Q1 l/ P! z7 R template: '<App/>', ~% G& G( b2 X4 S
})
, ?5 I. h# K& i. b5 ^
2 s# I" p$ }% z7 A" m5 ^3 q. S" Z/ W Z7 T8 V# x1 I
0 X, E; e+ b+ e0 |2 Q0 `& s) U(3) 修改 helloword.vue ,先使用state获取值进行测试
1 N# Z% Z, b( m5 A; t7 j$ |0 gState: vuex中的数据源,我们需要保存的数据就保存在这里,可以在页面通过 this.$store.state来获取我们定义的数据;
$ I5 y- [+ E: r' S6 Q: Y) dconst store = new Vuex.Store({
r+ I& V7 v: R: C! M state: {
+ Q8 Q% q/ Q* l( r count:1
# u$ M" C1 t! s3 W- W }3 b# ]9 `0 I G, P+ K
})
+ k9 x% C3 J* R9 G1 e I4 @3 [
0 y: w1 i u* jhelloword.vue----
: e3 s3 p, g! a<template> @' n9 f5 [: ?' C7 u2 z
<div class="hello">
/ e- g( j' e Y" S) ?1 v, x; P5 S. M5 q$ |9 _# g8 j0 D1 P( W3 E( K( J0 h
<h2>{{this.$store.state.count}}</h2>4 a$ J8 P1 ]. m9 k* n6 I
. l ]3 H) [3 I: \ F& {
</div>
. y# U1 y( l, b/ {& L1 Q</template>
( Y8 M/ j k8 Q9 [0 I* S; o$ S: E( X' z+ r5 ~* X# A
. l5 L& ^) J9 p, P5 ]
显示结果为: 1 6 ^+ G4 m* d9 J' w+ T p
5 j. d" M- y" T1 Q; \- T) r, p' Y* T: V) ]& h8 l
(4)Getter相当于vue中的computed计算属性,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,这里我们可以通过定义vuex的Getter来获取,Getters 可以用于监听、state中的值的变化,返回计算后的结果,这里我们修改Hello World.vue文件如下:$ s4 Y8 a% l, z' f% d+ Q$ ` V
+ Z4 _0 g3 q- H( ?. k# {+ H
const store = new Vuex.Store({
! }3 A( N0 I ]& S1 I- O8 z state: {
2 i5 K; k% o# p1 }! l) U0 F count:13 H d2 S1 S6 s6 _% b) r" _
},1 m; H6 E/ Q" K. o& e$ m5 E7 q
getters:{$ G# @! ^9 k0 A# l
getStateCount:state=>{
4 Z3 ?' c& y* m2 |( i' Q return state.count + 1;
* C# ] k8 ~! y }
/ v, C! z" t$ Q# T6 l/ I$ O }9 N) M$ t9 f& i% k+ x
})7 p, B/ ?* p; _0 v% K" h0 A
; D6 x; R3 f8 ]' k+ a
<template>
, x6 a/ R* n0 {# b" v3 a <div class="hello">( l$ w5 k6 J) \9 h; R& x$ G
: J: D" Q* ~* ]7 ^4 t
<h2>StateValue: {{this.$store.state.count}}</h2>5 \6 K$ Y3 |# o h- H
<h2>GettesVaule: {{this.$store.getters.getStateCount}}</h2>: W% ^) ]+ \7 q+ f6 D
</div>1 q9 P; v; w* s
</template># A2 q. B. q( p7 }, A: D" C. |
, s' |& ?: l! A/ G0 b0 k/ q, ~; q# ?, w0 W+ ~8 H9 g
显示结果:! w. U# o# b: o6 G, R" Y, r
StateValue: 1GettesVaule: 2
* U F7 V5 a+ B( P1 i j+ V8 c- E9 G2 v2 g$ x
(5)
) {+ [+ c" t0 @% \1 J: ]/ R- vMutations: 数据我们在页面是获取到了,但是如果我们需要修改count值怎么办?如果需要修改store中的值唯一的方法就是提交mutation来修改,我们现在Hello World.vue文件中添加两个按钮,一个加1,一个减1;这里我们点击按钮调用addFun(执行加的方法)和reductionFun(执行减法的方法),然后在里面直接提交mutations中的方法修改值:
5 [* I- J3 E O& d. m* Z3 k修改index.js文件,添加mutations,在mutations中定义两个函数,用来对count加1和减1,这里定义的两个方法就是上面commit提交的两个方法如下:
2 v N4 C. Q: G+ Fmutations:{& B O' `- T1 J0 W ?
add(state){2 F8 i; j, k# D% X$ B
state.count = state.count + 1;
3 k) H& v9 V- `6 R" q },- s$ y7 z. p5 F1 ^: g9 M
reduce(state){
5 K( p0 J3 j8 R state.count = state.count - 1;
; x& z# N+ T5 q$ W: e: x. x$ f) d }
" ~/ |, l' x/ d$ Y9 c6 S4 c }5 m- n# _$ u) X9 [
<template>
+ G) [( v4 m" K$ p; g6 L4 X <div class="hello"> V( ~8 y# J) I5 ^/ V4 h
<h1>Actions:</h1>4 O# G. M" g Y' V! y
<el-button type="primary" @click="addFunc()">Add</el-button>- k1 z q4 u% l* Y* K
<el-button type="Secondary" @click="reduceFunc()">Reduce</el-button>- {" }" `: l4 Q2 Z, G4 ^( X
<h2>StateValue: {{this.$store.state.count}}</h2>2 h5 A1 ^6 C6 r
<h2>GettesVaule: {{this.$store.getters.getStateCount}}</h2>
4 y0 z8 W" h0 a0 F8 T </div>, E3 Y3 D2 [1 x1 c- t& b! x0 g0 z
</template>% T8 e9 X! v# k& X1 o- Y: ]) W
+ K; q! Q s4 S! B3 X
' d/ E( Q6 F: Q+ Y1 r) F4 V
结果:4 ?% q% W& ?8 I4 v. ]8 _5 Q6 I. a
1 d6 d0 Q5 [! P4 }4 H+ b
$ Z0 @+ t. c" f& ~5 yActions:Add ReduceStateValue: 5GettesVaule: 6; w: [; A' E' T9 c3 G& s
. s9 f3 d1 l( F" t. F% B
5 D& X$ n: r. }5 |4 t; S; {9 T9 D* e
! b# r' R1 f+ M' D9 g. [ N( ]
I, m0 Q" {- d/ _) [# ^
b- d ]5 @& E5 w3 \4 ~4 S3 `8 g5 q8 Y, a- ?, n; w
1 n$ i/ H& e: T3 |3 X3 C: C. a
(6)Actions:
% F: m w2 E' o/ S我们看到,当点击三次后值从2变成了-1;页面上的值是改变了;我们达到了修改store中状态值的目的,但是,官方并不介意我们这样直接去修改store里面的值,而是让我们去提交一个actions,在actions中提交mutation再去修改状态值,接下来我们修改index.js文件,先定义actions提交mutation的函数:
. L1 @' ?1 V' }& m/ z1 T3 t
& r+ k' o( t$ L+ x: q% F9 j. Amutations:{
0 {2 w$ Z6 z& [! | add(state){
% _3 h; ^' K& \0 i- w5 z% _0 L; x state.count = state.count + 1;
" h$ E* m! K, t9 x$ l) X },
2 c/ }( M; F' }" D' a9 w reduce(state){( H: G/ \$ E W; J x& F$ M- L! R
state.count = state.count - 1;
* Y) g3 s# }4 F }% {2 b8 G# X3 v0 s0 z
},
" G/ `$ z$ l1 M. L9 d- G+ O6 m actions:{
5 P0 f" E/ r6 o$ A addFunc(context){
4 m4 l4 O: _' y- J context.commit("add");
: [4 P0 @3 N$ @8 G, v& v+ k9 k0 S5 ^ },! T( t) Y: ?+ O
reduceFunc(context){8 p) N$ `4 b5 v: R. p" G/ E
context.commit("reduce");) M$ h' d2 \4 V; `( K" s
}$ [! I+ n: Y# I( s$ f% Z
}
; X& O) D$ s1 \) R% y: O k( Y+ I7 C2 q
' C. r. Q/ b B2 T& M& D7 g, }& N
- H& {' R0 U0 x4 p8 Z& X
methods:{' ]) [7 [: w! C5 D
addFunc(){5 |4 U. B' e3 ?
//this.$store.commit("add");& O( a2 o5 u4 n# d( g
this.$store.dispaTCh("addFunc");: K7 m, E. l! A3 g" B1 R4 H
},4 s# C# G6 u& k& w/ o% ^4 p5 I
reduceFunc(){3 g: L6 k6 ^( {' \- {
//this.$store.commit("reduce");
" ^ @1 K3 S: `' L% x this.$store.dispatch("reduceFunc");7 y1 q/ |7 O3 m! q/ a |
}/ s( e R) t" U9 Q5 {2 m) }3 Q
}3 h) d. y, C. t+ Q
4 f" ]% q' ^' y( C: E5 _ u
这里我们把commit提交mutations修改为使用dispatch来提交actions;我们点击页面,效果是一样的 K5 w- s8 }* o
实现效果一样!!!!- Y; p) V7 G- ]! b; @# q8 p
! r1 \8 u* T( \5 |
# k. P# P( s! X- w8 z$ u% _5 T5 q/ E% e- ~
5 O+ Z2 G& K4 T. i* |/ B
" H. T4 M( J* I. E& v9 _5 k4 c
" R/ R$ ]2 G* _7 A& {( \
" @( r7 l4 K1 C
6 i+ g8 B1 j- e
. w4 R: j/ y8 q
2 z" z1 z, n* a5 L8 r; z2 L; ?- M& c. S+ h' S) n% V4 D; K
- L+ H0 j T' E, W0 V- U- _- M! ]- B6 G& m! m; J
+ d1 ]6 F, U ^' n$ x5 [0 Y6 t: H; ?) H1 ^& b5 a `: ^& y
, B \1 r! C) _* p+ O0 Q' I
|
|