|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
Vuex 的用法详解# R8 s9 J9 V$ X5 p2 |- s
3 @0 [# E+ H) t( L) b
本案例测试下Vuex的使用,创建一个新的web项目
& p2 d k! v" m- V6 m3 S0 _Vue init webpack web6 l% D/ T9 T3 O8 n
安装vuex
' p) f8 c' S' r. snpm install vuex --save
% e4 a U0 y) l; O% `, p启动, npm run dev,打开localhost:8080 即可
3 }- d1 F4 I4 Z) {9 g
z0 c- _# Y6 i8 ~* ] d: b, L+ l0 \5 }8 n
(1)引入vuex4 i( H8 U0 R1 Q; S! ~/ P6 [
创建一个src/store文件夹,创建index.js , 引入并导出store% P$ O) l+ U8 D) v9 \9 N
import Vue from 'vue'2 f3 F8 c9 |% L9 k8 L) d
import Vuex from 'vuex'3 o p6 B3 m0 m" x
Vue.use(Vuex);, N N+ I5 D( z' M. S, v; ~) H
const store = new Vuex.Store({
. `1 q# m& Q, Q( X})5 |* l1 i Z m! a
export default store;
8 O/ Y* g6 ^" K+ u V, s
; x; p6 Y$ I! F2 A0 I M: O(2)引入store到main.js* J) Z# B8 ]3 i1 N/ }( ?
import Vue from 'vue'$ |3 o* R. A6 \$ r: _
import App from './App'# l+ P. e5 s# l' ~' X9 p" ~
import store from './store'
; W |$ H( O* w/ M4 S
3 a" l; T P( S. G) pVue.config.productionTip = false
. {6 w6 `' u( H( x2 T2 [
& X$ W' }2 w' ?$ x1 X/* eslint-disable no-new */0 L8 b# i: N# y. W1 F
new Vue({
2 Q; E% @! b0 ]& H# a9 T) C el: '#app',3 G# I6 P% U6 u' o( p* W h
store,( M4 d+ a$ J. Z+ D( r+ S# z* G7 L/ Z& b
components: { App },
0 M/ ~1 ~( {- E% ~7 T4 R template: '<App/>'( s. P. Y+ T- Z. R
})
. P w* c! X+ a
# L; z: s0 a; s5 H$ v$ J8 E" }( @. O2 K
: B2 i2 _8 }5 V2 s6 C; [(3) 修改 helloword.vue ,先使用state获取值进行测试
; |& \5 C4 B! t/ P8 o# t4 `State: vuex中的数据源,我们需要保存的数据就保存在这里,可以在页面通过 this.$store.state来获取我们定义的数据;1 |. q Y2 F. L# O2 Z$ O
const store = new Vuex.Store({4 ~4 D( e4 P, e0 g; R8 }& J) o
state: {
; ` B! |' s8 Y9 w count:1
. f- b( I9 f: C0 F6 L0 } a }! ^) T2 t& r; Q. ?& |* H
})
8 E( N# E& Z/ r4 L
) Y: f& C( g; L' ~helloword.vue----
( Q2 ?$ S9 k1 B/ h* [8 l, d+ |5 a# M<template>
' z9 l* t/ q3 P1 c8 u# @; ^ <div class="hello"> q: u t: S" |
% \& s; ^/ O. U; \
<h2>{{this.$store.state.count}}</h2>+ Y1 v9 V7 S% k! f$ z1 X, x% a
: K/ J* a6 s, x2 c# M </div>& k# W+ m1 \, y/ U: _8 q' T4 a
</template>
& y4 S. l; ?; x8 ^' q: o. \8 a" R% z0 K2 c0 U
% O8 {1 ~6 g G0 h, x
显示结果为: 1
6 M9 _1 _: w0 q& C) a; V1 g, g8 ?% H( b- }. }6 _0 P- Y
3 b! U9 {# \( g( T4 G) ]0 Z(4)Getter相当于vue中的computed计算属性,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,这里我们可以通过定义vuex的Getter来获取,Getters 可以用于监听、state中的值的变化,返回计算后的结果,这里我们修改Hello World.vue文件如下:
" O+ m* N& I6 B% |) M, e. X/ q9 b: s& z: T( @7 G4 W
const store = new Vuex.Store({
5 I" i l: T5 ^# A$ O* b8 g2 h state: {
% D. q" u! c3 Z' K1 g count:1
9 L# g. \2 \* {+ y },
& f& c. l( l% e% `3 C3 E8 N9 t getters:{
$ I5 S3 t2 ~6 U4 _4 I- A getStateCount:state=>{% Y! O7 @2 @$ ?
return state.count + 1;
0 l3 i* H4 P! S, N8 d- \ }
$ X0 @6 v) T, G7 l, K" ^ }$ w+ e q' }% L. `' \8 R
})( S# o( A; ?1 [- v- B
a8 V2 T# t& t4 W) w% u, d
<template>- E. |& \' u# F2 i& n
<div class="hello">" O$ B3 i( X: ]! q0 E
, ~' D+ L4 i9 a) E/ Q% B Y* c <h2>StateValue: {{this.$store.state.count}}</h2>
; S( I( U' b B5 R! E. n* o <h2>GettesVaule: {{this.$store.getters.getStateCount}}</h2>
( g1 y, g# E _9 F: n1 ?3 ]! V </div>6 e! y5 X B( x( | e, ]# E
</template>
" Z6 O) z4 Q% _# n1 C! [
; t# W5 A2 W4 l" n/ _0 d. @1 H) C! H' n# ?7 s5 G+ M
显示结果:' Y& I4 e0 x6 j5 ?6 A
StateValue: 1GettesVaule: 22 m% C. H8 b# L7 p6 K3 z, Z+ ?6 N
/ n& q3 y2 }. w# Z G4 E# Z(5)4 z5 h4 j9 x) Q$ a( L7 d& {
Mutations: 数据我们在页面是获取到了,但是如果我们需要修改count值怎么办?如果需要修改store中的值唯一的方法就是提交mutation来修改,我们现在Hello World.vue文件中添加两个按钮,一个加1,一个减1;这里我们点击按钮调用addFun(执行加的方法)和reductionFun(执行减法的方法),然后在里面直接提交mutations中的方法修改值:
- f+ D. O5 A& G6 g修改index.js文件,添加mutations,在mutations中定义两个函数,用来对count加1和减1,这里定义的两个方法就是上面commit提交的两个方法如下:' X0 T& j9 }3 n. r0 P/ E0 ~ N' u
mutations:{
2 X4 a: @! P% B; W* c0 ~6 W1 s add(state){; G6 I) v+ ^7 x0 [
state.count = state.count + 1;9 ?" d9 v- ?) G1 h# r
},
. D" F5 [4 J+ D& ^6 j reduce(state){- h Q H K$ i- ?* k
state.count = state.count - 1;" f" U* T; z4 O ?
}* N: b1 I/ }4 n5 P1 O1 o
}
% |- e4 |& j) P3 |<template>
9 p) z+ T3 l: P <div class="hello">7 Z( u" A& A. z) \, T5 X
<h1>Actions:</h1>
3 v3 f: H. ]$ I; b# ~9 H <el-button type="primary" @click="addFunc()">Add</el-button>
, t; G; D+ Z% y5 z5 |2 R6 f <el-button type="Secondary" @click="reduceFunc()">Reduce</el-button>1 V; H' l/ r2 H. B% G. [$ R
<h2>StateValue: {{this.$store.state.count}}</h2>" w# e0 K/ R2 X$ ]0 y. H) H' W5 Z Q
<h2>GettesVaule: {{this.$store.getters.getStateCount}}</h2>
% d: L* \' W* Q3 v* _7 f3 L7 o </div>4 m* z ?/ V) {4 j
</template>
$ v1 L8 I. R& O7 |0 s% ^" E
. k. _5 h4 R$ V
4 i) x; ^! g& K6 T结果:
" C" [* q. a0 c. Q: l6 O
3 n8 F1 T* X/ q3 T
$ {8 |( a$ L( u# r. K B; ]Actions:Add ReduceStateValue: 5GettesVaule: 6+ P8 N$ {+ q" _, @- V
. S' G* d/ ^: v( N$ h" j) ~: |' B. j# [6 D- r4 T' f& X7 E4 i4 V
0 P+ {. ]% Q( j% a$ g+ V K" Z/ N0 ~+ R6 ?
7 R# q. z7 [6 y6 v/ j* ~
/ i8 V0 s4 @# A# ]# X" i
) R8 ^( L. B3 C2 ]5 H/ r; J
6 J, n7 F' Y- Y1 \7 h& I
(6)Actions:% z0 _6 C ]% M6 m' g
我们看到,当点击三次后值从2变成了-1;页面上的值是改变了;我们达到了修改store中状态值的目的,但是,官方并不介意我们这样直接去修改store里面的值,而是让我们去提交一个actions,在actions中提交mutation再去修改状态值,接下来我们修改index.js文件,先定义actions提交mutation的函数:
) s# P" j9 c# L" C3 Q. ? 3 @4 v1 K% R: Y8 g3 z* B
mutations:{
& ?; h3 V( R4 s2 p add(state){
, m$ c+ x. I/ q. K& t: c, F# s state.count = state.count + 1;+ S6 L5 w2 d* m, R) I* g3 J
},6 P7 A) Q V1 T9 y- X) u# |+ [
reduce(state){
8 `4 l. |3 ?3 Z/ w# L" F state.count = state.count - 1;2 X2 ^8 p6 v- r( }) w
}! A& `0 w% T4 X& K1 Y
},# i2 b6 p7 `6 g, s. F1 S6 v
actions:{
" z+ J6 c3 _4 U addFunc(context){9 W) g: M* z& I7 v! g9 \
context.commit("add");
# d1 }. r! f, x9 l },
, ~( i, H/ `5 w. o reduceFunc(context){
|. g; v: I( r( I+ Z context.commit("reduce");4 m9 ]. k* Q1 n4 U
}
" _" M! |+ T4 V% M! Q }1 z9 h8 K! N* H2 v
" a/ R0 h( R# R: ?, ?; C$ p' K# ]. w. p! i% _3 ^7 Z
2 h) p) j9 q4 \3 f: N/ p methods:{
7 _- }& i6 q0 f+ I$ q addFunc(){
& _& q( N- a- {* m- H$ O //this.$store.commit("add");
# [$ R9 L5 [; U4 V% Q- j this.$store.dispaTCh("addFunc");
0 v; r X0 m; E/ y4 \+ H },/ Y0 T( o3 _. W( U5 c7 }
reduceFunc(){
% P+ ^9 c( E( t6 a //this.$store.commit("reduce");9 S3 ]3 {8 Z* i* ]7 n
this.$store.dispatch("reduceFunc");
+ _0 u5 I0 }% z }
' [2 Z7 ^ p' H/ b }* F) g/ r. q( V4 Y& z& w7 ]1 k9 ?
. O& n! l0 Y1 P- Z
这里我们把commit提交mutations修改为使用dispatch来提交actions;我们点击页面,效果是一样的
0 s: k$ Q( Q. P- [ E( t实现效果一样!!!!
$ J* A& W) \6 F. x0 i3 C" \
. K1 b+ v. {) M* |, P) @4 {# Z; k' u( b: X
1 j9 S; x- q: V$ n# g) ~' @$ E" Q" O) A' h6 q
" Q' ^1 Z/ _8 b
. Z6 p0 K2 W2 x$ |0 T
' L6 o! ^+ H+ }# f% Y* s9 C+ Z" c9 X: {) C* c" D$ b
9 D; |( w+ x( M* {
- Z( X0 f- p, _! j* i9 W- D
; P3 d6 ~8 W5 w! r8 N3 g0 s+ J' p0 Z
6 I, w8 ^2 c, w% \5 j$ z
8 l3 ~" x Z' x+ I# a! F
- b3 y0 _: s. R: N
2 d. D8 ]% e+ h |
|