Vuex
1.什么是vuex
vuex是全局状态管理工具,开发vuex的主要原因是因为当我们遇到多个组件共
享状态时,组件的传值会导致代码难以维护,所以vuex是为vue开发的一款状
态管理工具,主要的核心分别为state,getters,mutations,actions,modules
2.vuex在项目中的使用
1.安装vuex
cnpm install vuex -save
2.在src目录下创建store文件夹
3.在store文件夹内创建index.js文件
4.在index.js 文件内引入 vue 和vuex
import Vue from "vue"
import Vuex from "vuex"
5.注册vuex Vue.use(vuex);
6.对vuex进行实例化
const store = new Vuex({
核心配置
})
7.导出vuex
export default store
8.在main.js文件中引入store文件夹内的index.js文件
import store from "./store"
9.运行机制
在vue的组件中通过dispatch来调用actions中的方法
,actions中通过commit来调用mutactions中的方法,
在mutactions可以直接操作state中的数据,state中
的数据只要发生改变就会立即响应给组件
3.state
state是数据源载体
全局:
$store.state.定义的属性
局部:
this.$store.state.定义的属性
4.mutations
mutations 唯一可以提交可以改变state的状态,也就是数据的属性值
全局:
$store.commit("方法名")
局部:
this.$store.commit("方法名")
5.getters
getters 用于改变state的值,派生出多个数据源
6.actions 异步
actions提交的是mutations,它可以包含任何的异步操作,存在的原因就是
因为mutations不能进行异步操作,所以通过actions这个函数来触发mutations,
来获取你需要的一些数据
7.modules 命名空间的处理
当一个项目store分的模块太多了的时候,在我们使用辅助函数,会很难查
询state,mutations,action来自那个模块,不便于后期的代码维护,所以我
们通过设置namespaced:true,的方式来将他变为带命名空间的模块
8.plugins
我们可以用plugin插件,添加长久存储插件
首先我们需要在vue脚手架中安装一下vuex-persist,来实现vuex数据的长久存储
9.vuex辅助函数
辅助函数分为mapState,mapMutations,mapActions,mapGetters,
在组件中引用:
import {mapActions,mapState,mapMutations,mapGetters} from 'vuex'
在方法中使用,可以定义一个方法,在方法中调用,
methods:{
...mapMutations(["test"]),
jump{
this.test() //调用方法
}
}
也可以直接
@click = "test()"
methods:{
...mapMutations(["test"]),
}
以上是基本的用法,当你用到名命空间的时候
…mapMutations(“模块的名称”,{“自定义的方法名”:“mutations中的方法名”})
使用这种方法的时候就不会在使用模块化的时候出现冲突的问题了,而且也便于后期的维护。