新建项目
vue init webpack ”项目名称“
安装element-ui
cnpm i element-ui--save
main.js导入element-ui：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
安装 axios
cnpm i axios --save
导入axios：
import axios from 'axios';
谷歌有收藏
安装 echarts
npm install echarts
导入echarts：
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;
安装vuex
cnpm i vuex --save
导入
import Vuex from “Vuex”
Vue.use(Vuex)
在store文件夹下创建store.js 文件
创建store对象
import Vue from 'vue';
import VueX from 'vuex';
Vue.use(VueX);
export default new VueX.Store({
state: {
projectName:'项目',
num:1,
count:0
},
getters:{
projectNameResult(state){
return state.projectName + state.num;
}
},
mutations:{
totalProject(state){
state.total += state.num
}
},
actions:{
commitTotalProject({commit}){
commit('totalProject');
}
},
});
const store = new Vuex.Store({
state:{}//state 存放全局共享的数据
})
将store挂载到vue实例中
组件访问 State的数据方式一： this.$store.state.数据名称
组件访问 State的数据方式二：import {mapState} from "vuex"
computed:{
...mapState(['count'])
}
Mutation 用于变更store的数据，不能直接在组件中通过点击事件this.$store.state.count++来改变数据
虽然繁琐，但是可以集中监控所有数据的变化 ，出现问题直接到mutations中修改。
异步变更数据，比如定时器什么的，但是action还是要通过触发mutation的方式来间接变更数据。
Getter:对已有的数据加工处理形成新的数据，类似vue的计算属性 ，已有数据的加工形成一个新的数据。