-
Vuex:是一个集中式状态管理工具,相当于react中的 redux
1) 主要解决的问题:大中型项目中复杂组件通讯问题 2) vuex操作流程: dispatch commit
vue组件---------------->actions------------>mutations------->state-------->vue组件更新
3)vuex的重要概念:
state:要保存的状态
mutations:是最终改变状态的方法集,mutations中的代码是同步执行的
actions:
4)使用步骤:
第一步:先安装vuex
npm install vuex --save
第二步:在src创建一个store目录,用来存放vuex相关文件
第三步:在store目录先创建一个index.js文件,做为vuex入口文件
第四步:在store目录的index.js中,写入下面的内容
//引入vuex,vue
import Vuex from 'vuex'; import Vue from 'vue'; //让vue识别vuex Vue.use(Vuex); //存储状态 const state={ userinfo:{ username:'张三', age:20, token:'1001' } } //将vuex暴露出去 export default new Vuex.Store({ state }); 第五步:在main.js中引入store,并在new Vue中注册 //引入vuex import store from './store'; new Vue({ ....... store, ........ }); 第六步:如何获取和设置数据 获取:在对应组件的computed中处理 即: this.$store.state来获取 设置/修改数据:通过commit到mutations来修改state 如何提高vuex的使用体验: 1.优化state写法 import {matpState} from 'vuex'
在计算属性中添加下面的内容:
computed:{
//组件的计算属性
str() {
return "hello"+this.msg }, //vuex的数据 ...mapState({ address:'address', userinfo:'userinfo' }) } }
2.优化actions,mutations
import { mapState,mapActions,mapMutations } from 'vuex';
...mapActions(['gomodify','aa','bb']), ...mapMutations(['setValue']), 3.隔离vuex各部分,提高可维护性