怎么在uni-app中使用Vuex 简单demo，通俗易懂(第二篇)

Vuex是Vue.js的官方状态管理库，可以帮助我们更好地管理和维护复杂状态和数据共享。在Vuex中，整个应用的状态被集中到一个单一的状态树中，这个状态树包含了所有的共享状态和数据。通过状态管理模块、getter、mutation、action等机制，我们可以方便地对状态进行操作和访问。下面是一个简单的Vuex代码示例，演示了如何实现状态集中管理。

首先，我们需要安装Vuex：

npm install vuex --save
1

然后，我们可以创建一个Vuex store：

import Vue from 'vue'  
import Vuex from 'vuex'  
  
Vue.use(Vuex)  
  
export default new Vuex.Store({  
//声明要管理的属性。
  state: {  
    count: 0,  
    name: 'Alice',  
    age: 20  
  },  
  /*
  mutations是Vuex中的重要概念，表示状态的改变。在Vuex中，状态的改变只能通过mutation来实现。mutations类似于事件，每个mutation都有一个字符串的事件类型和一个回调函数。这个回调函数就是我们实际进行状态更改的地方。
Vuex中的mutations具有同步性的特点，且需要在一个action中使用。通常，我们需要在mutations中更改状态，然后通过getter获取状态。
  */
  mutations: {  
    increment (state) {  
      state.count++  
    },  
    setName (state, name) {  
      state.name = name  
    },  
    setAge (state, age) {  
      state.age = age  
    }  
  },  
  /*
在Vuex中，actions是用于触发mutations来改变状态的函数。每个action可以包含任意异步操作，但必须至少调用一个mutation来更改状态。
在Vuex中，actions必须包含一个mutation参数，并且必须调用至少一个mutation来更改状态。如果没有调用任何mutation，则视为没有做任何更改。
*/
  actions: {  
    increment ({ commit }) {  
      commit('increment')  
    },  
    setName ({ commit }, name) {  
      commit('setName', name)  
    },  
    setAge ({ commit }, age) {  
      commit('setAge', age)  
    }  
  },  
  /*
  getters是Vuex中的计算属性，用于对state中的数据进行计算和过滤，并将结果返回给组件使用。getters可以基于state中的数据进行计算，并返回一个新的数据，用于满足组件对数据的不同需求。
在Vuex中，getters是使用mapGetters辅助函数将state中的数据映射到组件的computed属性中，从而使得组件可以方便地使用getters进行数据的计算和过滤。
 */
  getters: {  
    count: state => state.count,  
    name: state => state.name,  
    age: state => state.age  
  }  
})
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

在这个例子中，我们定义了一个包含count、name和age三个属性的state对象，以及对应的mutation、action和getter。通过mutation来改变状态，通过action来处理异步操作，通过getter来获取状态。我们可以在组件中使用mapState、mapGetters、mapActions和mapMutations等辅助函数来方便地访问和操作状态。下面是一个使用Vuex的组件示例：

  
  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在这个组件中，我们使用了mapState、mapGetters和mapActions等辅助函数来方便地访问和操作状态。通过点击按钮，我们可以调用对应的mutation、action和getter来改变状态和获取状态。最终，我们将状态显示在页面上。