Vuex详解

Posted 2023-03-03 曾胖神父

什么是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