【uniApp学习之六】vuex

一、新建的store文件下新建index.js

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  //数据，相当于data
  state: {
  
  },
  getters: {
    
  },
  //里面定义方法，操作state方发
  mutations: {
    
  },
  //  Action和Mutation相似，Mutation 不能进行异步操作，若要进行异步操作，就得使用Action
  actions: {
    
  },
  modules: {
    
  },
})


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

二、main.js引入

三、状态讲解

vuex中一共有五个状态 State  Getter  Mutation   Action   Module 
1

3.1 state

在vuex中state中定义数据，可以在任何组件中进行调用。提供唯一的公共数据源，相似于data
1

	import Vue from 'vue'
	import Vuex from 'vuex'
	Vue.use(Vuex)
	 
	export default new Vuex.Store({
	  //数据，相当于data
	  state: {
		userName:'zhangsan',
		age:18,
	  },
	})
1
2
3
4
5
6
7
8
9
10
11

调用：

方法一：

方法二：

方法三：从vuex中按需导入mapstate函数

3.2 Mutations

    mutations: {	//mutations中定义方法，操作state。方法中将state 作为第一个参数，可以传其他参数	
		add(state,m) {
			console.log(m)
			state.count += 2
		}
	},
1
2
3
4
5
6

调用：

方法一：

方法二：

3.3 Actions

    actions: {	//进行异步操作
	// Action和Mutation相似，Mutation 不能进行异步操作，若要进行异步操作，就得使用Action
		addCountAction (context) {
			context.commit('add')
		}
	}
1
2
3
4
5
6

调用：

方法一：

方法二：