Vue2.0 —— Vuex状态管理的使用

1.下载vuex

cnpm  install vuex  -S

2.创建sotre文件夹

image.png

3.编写store里面的index.js文件

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

import home from "./modules/home.js"
import news from "./modules/news.js"
import getters from "./getters.js"
import actions from "./actions.js"

Vue.use(Vuex)

export default  new  Vuex.Store({
    getters,
    actions,
    modules:{
        home,
        home
    }
})

4.编写其他的文件

如果有公共方法则写在getters.js和actions.js文件中

//getters.js
const getters = {
    
}
export default getters

//actions.js
const actions = {

}
export default actions

//home.js

import Types from  "../types.js"
import axios from  "axios"

const state = {
    homeList:[],
    num:0
}

const getters = {
    homeList(state){
        return state.homeList
    },
    num(state){
        return state.num
    },
}

const actions = {
    homeLists({commit,state}){
        const url = "https://route.showapi.com/9-9?area=丽江&areaid=101291401&showapi_appid=56337&showapi_timestamp=20190111165403&showapi_sign=5f12cb45fa964c6fa7ddbf15fa80ece7"
        axios.get(url).then(resp=>{
            var data = resp.data.showapi_res_body.dayList;
            console.log(data);
            commit("homeLists",data)
        }).catch(err=>{
            console.log(err);
        })
        
    },
    change({commit,state}){
        commit("change",10)
    }
}

const mutations = {
    homeLists(state,data){
        state.homeList = data;
    },
    change(state,data){
        state.num += data;
    }
}

export default {
    state,
    getters,
    actions,
    mutations,
}

5.在main.js文件中引入store

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index.js'
import axios from  "axios"
Vue.prototype.axios = axios;
Vue.config.productionTip = false

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

6.在home.vue中使用vuex

<template>
  <div id="home">
     <button @click="homeLists">改变数据</button>
     <button @click="change">改变数据</button>{{num}}
     <ul>
        <li v-for="(v,k) in homeList">
            <p>日期:{{v.daytime}}</p>
            <p>温度：{{v.day_air_temperature}}</p>
            <img :src="v.day_weather_pic" alt="">
        </li>
     </ul>
  </div>
</template>

<script>
import {mapGetters,mapActions,mapMutations} from "vuex"

export default {
   data(){
    return{
      name:'home',
    }
   },
   created(){
      console.log(this.$store.state.home.homeList)
   },
   computed:{
     ...mapGetters([
        "homeList",
        "num"
     ]),
   },
   methods:{
    ...mapActions([
        "homeLists",
        "change"
    ]),
   }
}
</script>

<style scoped="">
*{
    list-style: none;
}
    ul{
        width: 1200px;
        overflow: hidden;
        margin:0 auto;
    
    }
    li{
        width: 200px;
        float: left;
        height: 200px;
        border: 1px solid #cacaca;
        border-radius: 4px;
        padding: 20px;
        margin: 5px;
    }
</style>