VUE---学习进阶09

好久未更新，今天更新一下vuex，之后就可以做简单的项目了。可能会断更几天！！

1.vuex基础使用（安装，引入，使用，挂载）

1.安装 cnpm i vuex --save
2.import Vuex from 'vuex'
3.Vue.use(Vuex)
4.const store  = new Vuex.Store({})
5.new Vue({
	store,
})

2.vuex的四个属性

state:数据
mutations:修改数据（方法）常用于同步方法
actions：给组件派发动作（执行方法）常用于处理异步操作
getters:将state中的数据批量导出，可以得到计算属性
state:

  state:{
        name:'张三',
        age:20
      },

mutations:
（1）vuex 是单向数据流 不支持表单的双向绑定
（2）state:默认第一个参数指的就是当前store中的state 不可修改
（3 专门修改state中的数据

      // 操作数据的方法
      mutations:{
          changeName(state){
              state.name = '李四'
          },
          changeAge(state){
             state.age='15'
          },
          changeN(state,name){
            state.name = name;
          }
      },

actions:
(1)进行逻辑或异步操作
(2)context就是当前的仓库

 actions:{
        // context  指的就是当前所在的仓库store
         name(context){
          setTimeout(() => {
            context.commit('changeName')            
          }, 1000);
         },
         alert(context){
           alert(123)
         }
      },

getters:
（1）批量导出数据给组件用
（2）可以得到计算属性
（3） 将状态层的数据，导出给组件使用

      getters:{
        // state   初始数据
          myname(state){
              return state.name
          },
          myage(state){
            return state.age
          },
          say(state){
            return `我叫${state.name},今年${state.age}岁了`
          }
      }

3.vuex中辅助函数的使用

（1）mapGetters 是vuex提供的辅助函数 对应的vue中的computed属性，
（2）mapActions 是vuex提供的辅助函数 对应的vue中的methods方法
（3）mapGetters 、mapActions里面可以写数组也可以写对象，写数组的时候不可以进行重命名

    //   ...mapGetters([
    //       'myname',
    //       'myage',
    //       'say'
    //   ])

在需要的组件中导入辅助函数
import { mapGetters,mapActions} from "vuex";

computed: {

    ...mapGetters({
        myname:'myname',
        aaAge:'myage',
        aaSay:'say'
    })
  },
  methods: {
      ...mapActions({
          mname:'name',
          alert:'alert'
      }),
      cc(){
         alert(11)
      }
  },

在页面直接调用属性名
 <p>{{myname}}</p>
 <p>{{aaAge}}</p>
 <p>{{aaSay}}</p>
 <hr>
 <hr>
 <button @click="mname">间隔1秒修改姓名</button>

4.在vue项目中使用vuex

整体流程
1.创建项目，配置目录，初始化
2.配置路由
3.创建目录结构，src目录下创建store文件夹
4.配置仓库 store文件夹》index.js

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

需要在index中配置

配置 state，mutations，actions，getters 
导出 export default new Vuex.Store({state，mutations，actions，getters })

为了简化，还可以将 state，mutations，actions，getters 拿出来，组成modules文件夹，形成仓库。进行抛出，在index中移入

modules文件夹下：
import {reqList} from "../../util/request" 
const state = {
	list:[]
}
const mutations = {
	changeList(state,arr){
		state.list = arr
	}
}
const actions = {
	reqMenuList(context){
	}
}
const getters = {
	list(state){
		return state.list
	}
}
export default {
	state,
	mutations,
	actions,
	getters,
	namespaced:true
}

index中进行引入注册

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

Vue.use(Vuex)
import list from "./modules/list.js"
import role from "./modules/role.js"

export default new Vuex.Store({
	
		modules:{
			list,
			role
		}
	
})

5.如果项目有数据请求，此时需要去配置util->request.js，在进行接下来的代码之前，别忘了解决跨域问题。

config》index.js
 proxyTable: {
		'/api':{
		        target:'http://localhost:3000',
		        changeOrigin:true,
		        pathRewrite:{
		          '^/api':'http://localhost:3000'
		        }
		      }
	},

util->request.js

import axios from 'axios'
const baseUrl = '/api'
// 请求美食
export const reqFood = ()=>{
     return axios({
         url:baseUrl+'/foodList',
         method:'get'
     })
}

6.添加 state，mutations，actions，getters 内容

state:
const state={
    foods:[],//美食列表数据
    fDtail:{},//美食详情
    movie:[],
    mDetail:{}
}

mutations:
const mutations={
    // 定义所有的方法
    changeMovie(state,arr){
        state.movie = arr
    },
    changeFood(state,arr){
        state.foods = arr
    },
    changemDetail(state,obj){
        state.mDetail = obj
    },
    changefDetail(state,obj){
        state.fDtail = obj
    }
}

actions:
const actions={
    // 美食列表
   requsetFood(context){
        reqFood().then(res=>{
            console.log(res)
            context.commit('changeFood',res.data.data)
        })
   },
    //  美食列表详情
  requestFoodDetail(context,id){
        reqFoodDetail(id).then((res)=>{
            console.log(res)
            context.commit('changefDetail',res.data.detail)
        })
  }
}

getters:
const getters={
    // 导出数据的方法名
    foods(state){
        return state.foods
    },
    foodDetail(state){
        return state.fDtail
    }
}

7.页面渲染
(1)页面需要一加载就需要请求数据所以需要在mounted中调用
(2)之后往页面渲染，那么此时渲染的数据就是从mapGetters里面解构出来的，直接在页面渲染即可。

import { mapActions, mapGetters } from "vuex";

computed: {
    ...mapGetters({
        foods:'foods'
    })
 },
 
 methods: {
    ...mapActions({
      requsetFood: "requsetFood",
    }),
    toDetail(id){
      this.$router.push('/foodDetail/'+id)
    }
  },

  mounted() {
      this.requsetFood()
      console.log(foods)
  },
  
  之后往页面渲染，那么此时渲染的数据就是从mapGetters里面解构出来的，直接在页面渲染即可。

5.补充知识点

export default 和 export的使用

5.1.export default

//导出方 一个文件中只能有一个export default
export default store

//引入方
import aa from "./store"

5.2 export

//导出方 :一个文件中可以有很多export 
export const x =10;
export const y =10;
export const store =new Vuex.Store({});

export default [1,2,3]

//引入方
import arr,{x,y,store} from "./store"