Vuex详解

什么是Vuex

定义

Vuex是一个专门为Vue.js应用程序开发的状态管理模式

使用流程

1. 安装Vuex：使用npm或yarn安装Vuex。(安装指令：npm install vuex@next --save)
2. 创建Store：创建一个store.js文件，用于定义应用的状态。
3. 定义State：在store.js文件中定义state，它是应用的状态树。
4. 定义Mutations：定义mutations，它是用于更改state的函数。
5. 定义Actions：定义actions，它是用于提交mutations的函数。
6. 定义Getters：定义getters，它是用于访问state的函数。
7. 注册Store：在main.js文件中注册store，以便在应用中使用。
8. 使用Store：在应用中使用store，以便访问state、commit mutations和dispatch

Demo

Search.vue

<template>
    <input type="text" :value="$store.state.search" @change="onChange">
</template>
<script>
  export default{
    methods:{
        onChange(e){
            //使用commit函数提交mutation，以此修改状态
            this.$store.commit('setSearch',e.target.value);
            //使用dispatch函数异步提交mutation，以此获取状态
            this.$store.dispatch('getWeather',e.target.value);
        }
    }
  }
</script>

Weather.vue

<template>
   <div class="weather">
      <h2>{{searchText}}天气详情</h2>
      <p>天气{{weather.text}}</p>
      <p>体感温度{{weather.feels_like}}</p>
      <p>风力{{weather.wind_class}}</p>
      <button @click="setDefault">杭州天气</button>
   </div>
</template>
<script>
   import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
   export default{
      //计算属性
      computed:{
         //mapState是Vuex的辅助函数，可以把store中的数据映射到组件的计算属性中
         ...mapState(['search','weather']),
         //mapGetters是Vuex的辅助函数，可以把getters内的方法映射到组件的计算属性中
         ...mapGetters(['searchText'])
      },
      methods:{
        //mapMutations是Vuex的mutation的辅助函数,用于在组件中映射mutation内的方法，以便在组件内直接使用mutation里的方法
        ...mapMutations(['setSearch']),
        //mapActions是Vuex的actions的辅助函数,用于在组件中映射actions内的方法，以便在组件内直接使用actions里的方法
        ...mapActions(['getWeather']),
        //设置默认值
        setDefault(){
            this.setSearch('杭州')
            this.getWeather('杭州')
        }
      }
   }
</script>

store中的index.js

import { createStore } from "vuex";


export default createStore({
    //定义state，它是单一状态树————用一个对象就包含了全部的应用层级状态，主要作用是保存状态
    state:{
        search:'',
        weather:{}
    },
    //定义getters，作用是用于访问state(状态)
    getters:{
        searchText(state){
            return state.search+'市'
        }
    },
    //定义mutations，作用是用于更改state(状态)
    mutations:{
        setWeather(state,weather)
        {
            state.weather=weather;
        },
        setSearch(state,search)
        {
            state.search=search;
        }
    },
    //定义actions，actions中可以通过提交mutations，来修改state(状态),并且由于actions可以包含异步操作，所以一般异步请求都在actions中发起
    actions:{
       async getWeather({commit,state},city)
       {
          //发起异步请求
          //let res=await fetch('链接'+state.search);
          //let ret=await res.json();

          let testfeelslike=(Math.random()*10).toFixed(1);
          let testWeatherText='天晴';
          let testwindclass=(Math.random()*5).toFixed(1);
          let weatherInfo={text:testWeatherText,feels_like:testfeelslike,wind_class:testwindclass}
          //提交mutations
          commit('setWeather',weatherInfo)
       }
    }
})

App.vue

<template>
   <h1>天气预报</h1>
   <Search></Search>
   <Weather></Weather>
</template>
<script>
import Search from './components/Search.vue';
import Weather from './components/Weather.vue';
export default{
  components:{
    Search,
    Weather
  }
}

</script>

总体代码链接

链接：https://github.com/zengpang/Vue3Vuex