Vue框架和前后端开发【Vuex】

vue-vuex

Vuex官方文档

引入Vuex

安装

cnpm install vuex --save

引入到项目当中
main.js

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import Vuex from "vuex"

Vue.use(Vuex)
Vue.config.productionTip = false

const store = new Vuex.Store({
	state:{
		count:100
	}
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

文件分离

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)


const store = new Vuex.Store({
  state: {
    count: 100
  },
  mutations:{
      setCount(state){
        state.count++
      }
  }
})

export default store;     

main.js

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from "./store"
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

调用

vue管理状态-核心概念

核心概念

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:100,
    name:"iwen"
  },
  mutations: {
    increment(state,num){
      state.count+= num
    },
    decrement(state,num){
      state.count-=num
    }
  },
  actions: {
    asyncIncrement(context,num){
      setTimeout(() =>{
        context.commit("increment",num)
      },1000)
    }
  },
  modules: {
  }
})

引入
main.js

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

<template>
  <div class="hello">
    <p>{{ $store.state.count }}</p>
    <p>{{ count }} - {{ name }}</p>
    <button @click="addClick">增加</button>
    <button @click="minClick">减少</button>
  </div>
</template>

<script>

import { mapState,mapMutations,mapActions } from "vuex"

export default {
  name: 'HelloWorld',
  computed:{
    ...mapState(["count","name"])
  },
  methods:{
    ...mapMutations(["increment","decrement"]),
    ...mapActions(["asyncIncrement"]),
    addClick(){
      // this.$store.commit("increment",10)
      // this.increment(10)
        // this.$store.dispatch("asyncIncrement",10);
        this.asyncIncrement(100);
    },
    minClick(){
      // this.$store.commit("decrement",5)
      this.decrement(5)
    }
  }
}
</script>

Vue插件-Swiper

官网插件

vue-awesome-swiper[轮播图]

安装

npm install swiper vue-awesome-swiper --save

全局引用
main.js

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

轮播图的使用：HelloWorld.vue

<template>
  <div class="hello">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>
        <img src="http://iwenwiki.com/api/livable/banner/banner1.png" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="http://iwenwiki.com/api/livable/banner/banner2.png" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="http://iwenwiki.com/api/livable/banner/banner3.png" alt="">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
        },
      },
    };
  },
};
</script>
<style scoped>
img{
  width: 100%;
  height: 200px;
}
</style>

Vue插件-ElementUI；Vue打包部署