vuex概念、数据分块、四种使用方案、辅助工具

一、Vuex
1、概念

Vuex是Vue的状态管理工具，也是多组件状态共享的工具

Vuex相当于Vue的一个集中式的存储仓库
它存储的是数据（状态）
存储仓库：本地仓库 cookie 数据库
集中式数据管理，一处修改，多处使用
适合中大型应用
2、为什么使用Vuex

实现流程化，让项目的运行更加优化
3、状态和状态管理模式

用一条数据去管理一个视图，那这个数据就称为“状态”
用一条数据管理一个视图的模式，称之为“状态管理”
4、四种Vuex开发流程方案

标准——>标准
非标准——>标准
标准——>非标准
非标准——>非标准
5、Vuex核心组成

actions
表示动作的创建者，作用是创建动作、发送动作，用于用户交互
mutations
表示动作的触发者，作用是修改数据、更新视图
state
表示状态的存储者，作用是定义状态
注：
后端的数据交互写在actions里
Vuex调试工具主要调试mutations
Vuex是流程化执行的，符合单向数据流思想
当不确定是否要使用vuex时，就选择不用

6、基础操作步骤

安装vuex
$ cnpm i vuex -S或 $ yarn add vuex

在src目录下新建 store目录，在其中创建index.js

//目录是src/store/index.js
import Vuex from ‘vuex’;
import Vue from ‘vue’;
Vue.use(Vuex);

//定义store模块
const store=new Vuex.Store({
state：{
count:0
},
actions:{
//actions是一个对象
//存储的都是创建、发送动作方法
// fn(store对象，组件传来的实参1，实参2，···){}
increment ( { commit }, val ) {
// 动作创建
const action = {
type: INCREMENT,
val
}
commit(action)
},
mutations：{
//mutations是一个对象
//存储的是方法
//方法名是actions发送来的动作类型
//mutations用来修改数据
//payload表示从组件传递来的参数，又称为负载
[ INCREMENT ] ( state,action ) {
//修改数据
state.count ++
}
},
getters:{} //表示帮助视图，获得store中的state
modules // 用来实现数据分块，方便管理
})

//导出store模块
exports 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
39
在main.js中注入store
import store from ‘./store’
new Vue({
router, //注入router后，子组件都会拥有$route和$router属性
store, //注入store后，子组件都会拥有KaTeX parse error: Expected 'EOF', got '}' at position 38: …der:h=>h(App), }̲).mount(’#app’)
1
2
3
4
5
6
在组件内使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
7、vuex 之 数据分块 操作步骤

安装vuex
$ yarn add vuex
在src下新建store目录，并在其中新建index.js
import Vuex from ‘vuex’
import Vue from ‘vue’
import * as todos from ‘…/pages/vuex_basic/store’

Vue.use( Vuex )

const store = new Vuex.Store({
modules: {
//每一个分块出去的数据包
vue_basic: {
state: todos.state,
actions: todos.actions,
mutations: todos.mutations,
getters: todos.getters
}
}
})
export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
在main.js中注入
import store from ‘./store’
new Vue({
store, // 在项目中注入store,让所有的子组件拥有一个属性 KaTeX parse error: Expected 'EOF', got '}' at position 45: …: h => h(App), }̲).mount(’#app’)
1
2
3
4
5
在vue_basic/store.js中打造state、actions、mutations、getters
import axios from ‘axios’
const ADD_TODOS = ‘addTodos’
const GET_CATEGORY = ‘getCategory’

export const state = {
todos: [
{
id: 1,
task: ‘任务一’
}
],
category: null
}

export const actions = {
addTodos ({ commit }, val ) {
const action = {
type: ADD_TODOS,
val
}
commit( action )
},
getCategory ( {commit} ) {
axios({
url: ‘/index.php’,
params: {
r: ‘class/category’,
type: 1
}
}).then( res => {
// 动作创建
const action = {
type: GET_CATEGORY,
payload: res.data.data.data
}
commit( action )
}).catch( error => console.log( error ))
}
}

export const mutations = {
[ ADD_TODOS ] ( state,action ) {
state.todos.push({
id: state.todos.length + 1,
task: action.val
})
},
[ GET_CATEGORY ] ( state,action ) {
state.category = action.payload
}
}

export const getters = {
getTodos ( state ) {
return state.todos
}
}
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
51
52
53
54
55
56
57
在vue_basic/index.vue中使用

todolist增加功能

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
vue项目中store下的一个目录就是一个数据包
vue是通过一个叫做module的模块来管理的

四种方案
前标准——后标准
前标准——后非标准
前非标准——后非标准
前非标准——后标准
component —dispatch—> actions —commit—>mutations—state <----getters----component

8、辅助工具

mapActions
mapMutations
mapGetters
mapState
————————————————
版权声明：本文为CSDN博主「Orange_SQ」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_37970964/article/details/100876244