Vue入门 Vuex状态管理模式--2

Vue入门 Vuex状态管理模式–2

官网地址: https://vuex.vuejs.org/zh/installation.html

第一步创建vue项目可前往Vue入门 创建vue项目并安装UI框架ElementUI–1

一、安装Vuex

二、Vuex的用法

1. state：状态。

2. getters：获取数据，state的计算属性。

3. mutations：修改状态，同步操作，非常类似于事件。

4. actions：异步操作。

5. modules：官网上讲述到Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、getter、mutation、action，甚至是嵌套子模块。

三、用一个更简单的方式来使用vuex

1. mapState

2. mapMutations

3. mapActions

4. mapGetters

一、安装Vuex

在Vue项目下输入npm install vuex --save，如下图所示:

二、Vuex的用法

1. 创建vuex包下的store.js文件，代码如下：
2. 在main.js中引入store，代码如下：（ps：最后一个红色框框，是在框框的上方store）
3. 在HelloWorld.vue中删除不用的代码并获取状态值，代码如下：效果图如下：
   

getters：获取数据，state的计算属性

1. 代码如下：从页面获取的代码如下：效果图如下：

mutations：修改状态，同步操作，非常类似于事件

2. 代码如下：效果图如下：

actions：异步操作

3. 代码如下：
   效果图如下：
   

modules：官网上讲述到Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、getter、mutation、action，甚至是嵌套子模块

4.代码如下：

三、用一个更简单的方式来使用vuex

1. mapState，代码如下：

2. mapMutations，代码如下：

3. mapActions，代码如下：

4. mapGetters，代码如下：

总体效果图：