Vuex学习
# 介绍
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
# 学习资料
# 教程
https://www.jianshu.com/p/b014ff74bdb6
# 文档
https://vuex.vuejs.org/zh/guide/
# 安装
npm install vuex -S
1
# 引入
创建 /src/store/index.js
import Vue from 'vue'
//引入 vuex 并 use
import Vuex from 'vuex'
Vue.use(Vuex)
1
2
3
4
2
3
4
在main.js中引入
import Vue from 'vue'
import App from './App'
import store from './store/index.js' //导入 store 对象
Vue.config.productionTip = false
new Vue({
//配置 store 选项，指定为 store 对象，会自动将 store 对象注入到所有子组件中，在子组件中通过 this.$store 访问该 store 对象
store,
el: '#app',
components: { App },
template: '<App/>'
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 简单使用
在 /src/store/index.js中
import Vue from 'vue'
//引入 vuex 并 use
import Vuex from 'vuex'
Vue.use(Vuex)
//定义属性（数据）
var state ={
count:6
}
//创建store对象
const store =new Vuex.Store({
state
})
//导出store对象
export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
App.vue中使用
<template>
<div id="app">{{ count }}</div>
</template>
<script>
import Home from './components/home.vue';
export default {
name: 'App',
components: {
Home
},
computed: {
count() {
//通过this.$store 访问该 store 对象 ,获取该 count
return this.$store.state.count
}
}
};
</script>
<style></style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# mapState辅助函数
获取state
/src/store/index.js中
import Vue from 'vue'
//引入 vuex 并 use
import Vuex from 'vuex'
Vue.use(Vuex)
//定义属性（数据）
var state ={
count:10,
userinfo:{
name:'jack',
jobs:['fesf','fehfe']
}
}
//创建store对象
const store =new Vuex.Store({
state
})
//导出store对象
export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
组件中
<template>
<div class="home">
<!-- 使用 -->
{{count}}
</div>
</template>
<script>
//引入mapState
import {
mapState
} from 'vuex'
export default {
name: 'Home',
//获取state
computed: {
...mapState(["count"])
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# mutations
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
/src/store/index.js中
import Vue from 'vue'
//引入 vuex 并 use
import Vuex from 'vuex'
Vue.use(Vuex)
//定义属性（数据）
var state ={
count:10,
userinfo:{
name:'jack',
jobs:['fesf','fehfe']
}
}
//mutations
var mutations = {
increment(state){
state.count++
},
decrement(state){
state.count--
}
}
//创建store对象
const store =new Vuex.Store({
state,
mutations
})
//导出store对象
export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
组件中
<template>
<div class="home">
<!-- 使用 -->
{{count}}
<button @click="add">增加</button>
<button @click="min">减少</button>
</div>
</template>
<script>
import {
mapState
} from 'vuex'
export default {
name: 'Home',
computed: {
...mapState(["count"])
},
methods:{
//方法
add(){
this.$store.commit("increment")
},
min(){
this.$store.commit("decrement")
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# 提交载荷（Payload）
你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）：
/src/store/index.js中
import Vue from 'vue'
//引入 vuex 并 use
import Vuex from 'vuex'
Vue.use(Vuex)
//创建store对象
const store = new Vuex.Store({
state: {
count: 10,
userinfo: {
name: 'jack',
jobs: ['fesf', 'fehfe']
}
},
mutations: {
increment(state, n) {
state.count += n.num
},
decrement(state, n) {
state.count -= n
}
}
})
//导出store对象
export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
组件中
<template>
<div class="home">
<!-- 使用 -->
{{count}}
<input type="text" v-model="num">
<button @click="add">增加</button>
<button @click="min">减少</button>
</div>
</template>
<script>
import {
mapState
} from 'vuex'
export default {
name: 'Home',
data(){
return{
num:0
}
},
computed: {
...mapState(["count"])
},
methods:{
add(){
// this.$store.commit("increment",Number(this.num));
//使用对象风格提交
this.$store.commit({
type:'increment',
num:Number(this.num)
})
},
min(){
this.$store.commit("decrement",Number(this.num));
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
# Mutation 需遵守 Vue 的响应规则
既然 Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：
- 最好提前在你的 store 中初始化好所有所需属性。
- 当需要在对象上添加新属性时，你应该
使用
Vue.set(obj, 'newProp', 123), 或者以新对象替换老对象。例如，利用对象展开运算符 (opens new window) (opens new window)我们可以这样写：
state.obj = { ...state.obj, newProp: 123 }1
# Mutation 必须是同步函数
# mapMutations辅助函数
组件中
<template>
<div class="home">
<!-- 使用 -->
{{count}}
<input type="text" v-model="num">
<button @click="add">增加</button>
<button @click="min">减少</button>
</div>
</template>
<script>
import {
mapState,
mapMutations
} from 'vuex'
export default {
name: 'Home',
data(){
return{
num:0
}
},
computed: {
...mapState(["count"])
},
methods:{
//辅助函数
...mapMutations(["increment","decrement"]),
add(){
// this.$store.commit("increment",Number(this.num));
// this.$store.commit({
// type:'increment',
// num:Number(this.num)
// })
this.increment({num:Number(this.num)})
},
min(){
// this.$store.commit("decrement",Number(this.num));
this.decrement(Number(this.num))
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
# Action
Action 类似于 mutation，不同在于：
- Action 提交的是 mutation，而不是直接变更状态。
- Action 可以包含任意异步操作。
/src/store/index.js中
import Vue from 'vue'
//引入 vuex 并 use
import Vuex from 'vuex'
Vue.use(Vuex)
//创建store对象
const store = new Vuex.Store({
state: {
count: 10,
userinfo: {
name: 'jack',
jobs: ['fesf', 'fehfe']
}
},
mutations: {
increment(state, n) {
state.count += n.num
},
decrement(state, n) {
state.count -= n
}
},
actions:{
incrementAction(context,n){
context.commit("increment",n)
},
decrementAction(context,n){
context.commit("decrement",n)
}
}
})
//导出store对象
export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
组件中
<template>
<div class="home">
<!-- 使用 -->
{{count}}
<input type="text" v-model="num">
<button @click="add">增加</button>
<button @click="min">减少</button>
</div>
</template>
<script>
import {
mapState,
mapMutations
} from 'vuex'
export default {
name: 'Home',
data(){
return{
num:0
}
},
computed: {
...mapState(["count"])
},
methods:{
...mapMutations(["increment","decrement"]),
add(){
// this.$store.commit("increment",Number(this.num));
// this.$store.commit({
// type:'increment',
// num:Number(this.num)
// })
// this.increment({num:Number(this.num)})
//通过dispatch触发
this.$store.dispatch("incrementAction",{num:Number(this.num)})
},
min(){
// this.$store.commit("decrement",Number(this.num));
// this.decrement(Number(this.num))
this.$store.dispatch("decrementAction",Number(this.num))
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
# Getter
有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数
/src/store/index.js中
import Vue from 'vue'
//引入 vuex 并 use
import Vuex from 'vuex'
Vue.use(Vuex)
//创建store对象
const store = new Vuex.Store({
state: {
count: 10,
userinfo: {
name: 'jack',
jobs: ['fesf', 'fehfe']
}
},
getters:{
getCount(state){
if(state.count === 100){
return "满了"
}else{
return state.count;
}
}
}
})
//导出store对象
export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
组件中
<template>
<div class="home">
<!-- getters使用 -->
{{this.$store.getters.getCount}}
------
{{count}}
<input type="text" v-model="num">
<button @click="add">增加</button>
<button @click="min">减少</button>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 传参
/src/store/index.js中
import Vue from 'vue'
//引入 vuex 并 use
import Vuex from 'vuex'
Vue.use(Vuex)
//创建store对象
const store = new Vuex.Store({
state: {
count: 10,
userinfo: {
name: 'jack',
jobs: ['fesf', 'fehfe']
}
},
getters:{
getCount:(state => id =>{
if(state.count === id){
return state.count;
}else{
return "不符合规范";
}
})
}
})
//导出store对象
export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
组件中
<template>
<div class="home">
<!-- getters使用 -->
{{this.$store.getters.getCount(30)}}
------
{{count}}
<input type="text" v-model="num">
<button @click="add">增加</button>
<button @click="min">减少</button>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
#
去GitHub编辑 (opens new window)
上次更新: 2021/07/15, 14:11:45