vuex

1、安装vue-cli脚手架

npm install -g vue-cli

2.创建vue项目模板

vue init webpack <projectName>

3.先关运行命令

npm run dev //启动开发环境
npm run start //
npm run build //编译打包文件node build/build.js

４．路径问题

编译后路径/path之前会被加上二级域名（github上），所以需要将相对路径改成绝对路径：

config->index.js->assetsPublicPath: '/'(46行)改成assetsPublicPath: './'

５．目录

src为源码目录

1.main.js项目入口引入各种组件
２App.vue为项目模板

６．模块引入

index.js路由

export default new Router({
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/rigster',
      component: rigster
    }
  ]
})

import Login from '@/page/Login'  /@代表src目录

７．css

<style scoped alng="less"></style>

scoped仅在本页面起作用
css模块引入

@import '../path'

8.安装less依赖

npm install less less-loader --save

那么先使用npm install -g npm-install-peers后再安装npm install webpack 就不会报错

9.Element-ui框架

网址：http://element-cn.eleme.io/#/zh-CN

10.axios(发送请求的库)数据请求接口封装
request.js

import axios from 'axios';
import { Message } from 'element-ui';

axios.defaults.baseURL = 'http://blog-server.hunger-valley.com/';   //后面传路径会把这段加在最前面
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';　　　//发送数据的类型格式
axios.defaults.withCredentials=true;  //解决服务器和前端页面跨域问题（前端页面部署在了github上）,接口跨域是不会带上cookie,设置成true就是告诉浏览器跨域带上cookie
console.log('00000000')
export default function request(url,type="GET",data={}){  //type默认是传值为空时为get，之不为空就会被赋值，es6用法。
  return new Promise((resolve,reject)=>{

    console.log(1111111)
    let option={
      url,
      method:type
    }
    if(type.toLowerCase()==='get'){
      option.params=data
    }else{
      option.data=data
    }
console.log(22222222)
    axios(option).then((res)=>{
      if(res.data.status==='ok'){
        if(res.data.isLogin){
          Message.success(`登录者：${res.data.data.username}`)
          console.log(3333333)
        }else{
          Message.success(res.data.msg)
        }

        resolve(res.data);
      }else{
        Message.error(res.data.msg)
        reject(res.data)
      }
    }).catch((err)=>{
      //Message.error('网络异常')
      //reject({'msg':'网络异常'})
    })


  });
}

11.api接口封装
12.npm install vuex –save

13.vuex

安装：npm install vuex --save
引入：

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



// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)
Vue.use(Vuex)
//注册store对象
const store = new Vuex.Store({
  state: {
    count: 0,
    nmae;"wang",
    age:18
  },
  mutations: {              //必须是同步函数，异步函数则属于Action
    increment (state) {
      state.count++
    }
  }，
　　getters:{
    fullname(state){
      return state.name+':'+state.age
    },
  },
})

//注册一个子组件
const Counter={
  template:'
    <div>{{count}}</div>
    <button @click="add">add</button>
  ',
  computed:{
  　　count(){
      return this.$store.state.count;
    },
    fullname(){
      return this.$store.getters.fullname;
    },
    ...Vuex.mapState(['count','name','age'])//将store 中的count映射过来，一一对应,此时我们可以在子组件中直接使用count,name,age
    ...Vuex.mapGetters(['fullname'])
　　},
  methods:{
   add(){
     this.$store.commit('increment')//store.commit()用来触发mutation里面指定的函数,可传递第二个参数
   }, 

  }
}

//注册一个跟组件并且挂在在app上
const app=new Vue({

el:'#app',
  store:store,
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  components:{Counter,},
  template:'<counter></counter>',

})
//通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。

//这样，app的所有子组件都可以访问到store对象。
this.$store.state 
this.$store.commit()


!!!!state\getters都是获取状态，，所以可以通过(Vuex.mapState和Vuex.mapGetters)映射到到组件的computed中
!!!!mutation是修改状态，所以（Vuex.mapMutation）映射到组件的methods中

　一个完整的vuex的store仓库

import auth from '@/api/auth.js'
import { Message } from 'element-ui'

const state={
  user:null,
  isLogin:false
}
const getters={
  user(state){return state.user},
  isLogin(state){return state.isLogin}
}
const mutations={
  setUser(state,payload){
    state.user=payload.user;
  },
  setLogin(state,payload){
    state.isLogin=payload.isLogin;
  }
}
const actions={
  login({commit},{username,password}){
    return auth.login({username,password}).then((res)=>{
      commit('setUser',{user:res.data});
      commit('setLogin',{isLogin:true});
      Message.success(`欢迎您${res.data.username}`)
    })
  },
  logout({commit}){
    auth.logout().then(()=>{
      commit('setUser',{user:null});
      commit('setLogin',{isLogin:false});
    })
  },

  register({commit},{username,password}){
    return auth.register({username,password}).then((res)=>{
      commit('setUser',{user:null});
      commit('setLogin',{isLogin:false});
      Message.success('注册成功，请登录')
    })

  },
  checkLogin({commit}){
    auth.getInfo().then((res)=>{
      if(res.isLogin){
        commit('setUser',{user:res.data});
        commit('setLogin',{isLogin:true});
        return true;
      }else{
        commit('setUser',{user:null});
        commit('setLogin',{isLogin:false});
        return false;
      }
    })
  }
  /*
  this.logout().then((isLogin)=>{})
  */
}



export default {
  state,   
  getters,
  mutations,
  actions
}

vuex实现思路总结：
import {mapActions} from ‘vuex’
１．store仓库对象，保存着整个项目的状态，

import Vue from 'vue'
import Vuex from 'vuex'
import auth from './modules/auth'
import blog from './modules/blog'

Vue.use(Vuex)

export default new Vuex.Store({
  modules:{
    auth,
    blog
  },
});

２．通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import store from './store/index'

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

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

３．通过mapAction()将store中提交更改状态的方法映射到子组件中，子组件通过映射的方法来更改整个项目的状态。

import {mapActions} from 'vuex'

export default {
  data () {
    return {
      username:'',
      password:''
    }
  },
  methods:{
    ...mapActions([
      'login'
    ]),
    onLogin(){
      this.login({username:this.username,password:this.password}).then((res)=>{
        console.log(res)
        this.$router.push('/')//跳转到首页
      })
    },
  },
}

注意

Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：
1.应用层级的状态应该集中到单个 store 对象中。
2.提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
3.异步逻辑都应该封装到 action 里面。
4.只要你遵守以上规则，如何组织代码随你便。如果你的 store 文件太大，只需将 action、mutation 和 getter 分割到单独的文件。