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

一时失言乱红尘 2021-08-19 11:31 259阅读 0赞

一、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后，子组件都会拥有 r o u t e 和 route和 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