vue 笔记

新建项目

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的计算属性 ，已有数据的加工形成一个新的数据。