vuex的简单使用

1、使用步骤

1.1 使用 npm 安装 Vuex 安装命令 cnpm install vuex -S
1.2 .src目录下创建一个store的文件夹，里面放一个index.js
1.3 实例化vuex实例对象

2.vuex的核心概念五个

1 、state

组建中访问state中数据的第一种方式
this.$store.state.全局数据名称

2 组件中访问state的第二种方法

1.从vuex中按需引入组件

import  { mapState } from 'vuex'

2.将全局数据，映射为当前组件的计算属性

computed:{
//在页面中 通过插值表达式显示
...mapState([ 'count' ])
}

2.mutation（突变） 唯一能够改变state中数据的东西使用

1.this$store.commit();
方法如下：一般在methods中使用

image.png

mutation按需引入同state

import { mapState, mapMutation } from 'vuex'

2.将全局数据，映射为当前组件的计算属性

mothods:{
...mapMutation(['add','addn']),
//在方法中调用
btn(){
this.add();
}
}

3、action 异步操作只能用action（引入方式同上）

在action中不能直接修改state中的数据，需要调用context.commit（）,触发mutation 的方法

image.png

4.getter类似computed，使用如下

image.png

image.png

核心内容的引入如图：

image.png

5.module

将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
具体参考：vuex：https://vuex.vuejs.org/zh/guide/modules.html