vuex状态管理与百度图表

vuex：状态管理。

vuex由几部分组成：

 state  mutations     getters     actions        modules
 状态量  操作数据源    计算属性  分发mutations  vuex模块化 
 数据源  

 
 1、项目中有哪些地方会用到vuex
    若只有一个地方用到vuex（用户登录信息），则无需使用modules。
    若有多个地方用到vuex，应该使用modules。

 2、模块化vuex：
    new Vuex.Store({    
     modules:{
       users:{
         state:{},
         mutations:{},
         getters:{},
         actions:{}   
       },
       car:{
         state:{},
         mutations:{},
         getters:{},
         actions:{}
       }
     }
    })

一、State：

1、数据源：能够被所有的.vue文件访问的状态量。
在src\vuex\state.js文件中：
export default {
x:10,
userName:‘张三’
}
2、如何在.vue文件中访问state状态量：
文本插值：{{this.KaTeX parse error: Expected 'EOF', got '}' at position 17: …tore.state.状态量名}̲} 在方法区使用：met…store.state.状态量名);
}
}
3、利用ES6解构的方式访问state状态量：
import {mapState} from ‘vuex’;
export default {
computed:{
…mapState([‘userName’,‘x’])
}
}
（1）单组件文件中用到的状态量进行注册，不使用的不用在
computed中注册。
（2）使用状态量时可以直接书写状态量的名称。

二、Mutation：

1、操作数据源：
在src\vuex\mutations.js文件中：
export default {
modifyUserName:function(state){
//state,必备参数，可以利用该参数访问state数据
state.userName=‘李四’;
}
}
2、在.vue文件中如何调用mutations方法。
this.$store.commit(‘方法名’,参数);3、如何为mutations分发载荷：载荷（payload）：为mutations方法传递的第三方参数。（1）载荷分发：将参数一个一个进行分发。this.$store.commit(‘modifyUserName’,this.uName)
（2）对象分发：将参数设置为对象进行分发。
this.$store.commit({
type:‘modifyUserName’,
newUserName:this.uName
})
modifyUserName(state,v){
state.userName=v.newUserName;
}
例：制作一个文本框，将用户在文本框中输入的内容改为状态量
userName的取值。
4、利用ES6解构的方式分发mutations方法：
import {mapMutations} from ‘vuex’;
methods:{
…mapMutations([‘modifyUserName’]),
……
}
在其他方法中调用mutations方法，必须使用this来实现：
this.modifyUserName(this.uName);

三、Getter：

1、数据源的计算属性：
计算属性:function(state){
return 计算属性的值
}
2、在.vue文件中如何引用Getter属性：
{{this.$store.getters.计算属性名}}
3、利用ES6的解构方式来引用Getter属性：
import {mapGetters} from ‘vuex’;
computed:{
…mapGetters([‘计算属性名’]),
}

四、Action：

1、异步调用mutations方法：
actions中指定的都是方法，这些方法不能直接操作数据源和计算属性，只能间接调用mutations方法。
2、在src\vuex\actions.js文件中：
export default {
xyz:function(context){
context.commit(‘mutations方法名’,参数);
}
}
3、如何调用actions方法：
this.$store.dispatch(‘actions方法名’,参数);
4、使用ES6解构的方式调用actions方法：
import {mapActions} from ‘vuex’;
methods:{
…mapActions([‘xyz’]);
}
5、actions与mutations的区别：
mutations只能执行同步操作，actions可以执行异步操作。

异步操作：

（1）资源加载（图片、音频、视频）。
（2）计时函数（setTimeout()、setInterval()）。
（3）XHR请求（Ajax、Axios）。

解决方案：回调函数、Promise（ES6）

百度图表

ECharts组件：图表数据中第一层键名。

1、title：标题组件
2、xAxis：水平轴
3、yAxis：垂直轴
4、legend：图例
5、tooltip：工具提示
6、series：数据系列（数组）
7、color：颜色（数组）

var option={
title:{
text:“标题”
},
xAxis:{
data:[‘类目一’,‘类目二’,…]
},
yAxis:{}, //必须要写
legend:{
data:[‘图例一’]
},
tooltip:{},
series:[
{
name:‘图例一’ //图例数组元素的取值必须和数据系列中的name属性取值一致，
type:‘bar’ //bar-柱形图；pie-饼形图；line-折线图
},{}
],
color:[‘图例一颜色’,‘图例二颜色’,…]
}