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中使用
mutation按需引入同state
import { mapState, mapMutation } from 'vuex'
2.将全局数据,映射为当前组件的计算属性
mothods:{
...mapMutation(['add','addn']),
//在方法中调用
btn(){
this.add();
}
}
3、action 异步操作只能用action(引入方式同上)
在action中不能直接修改state中的数据,需要调用context.commit(),触发mutation 的方法
4.getter类似computed,使用如下
核心内容的引入如图:
5.module
将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
具体参考:vuex:https://vuex.vuejs.org/zh/guide/modules.html