vue中的vuex

第一步:安装 vuex

npm install vuex@3

安装完成后,在package.json文件中存在vuex版本:如图

在main.js文件中导入store的配置文件

import Vue from 'vue'
import App from './App.vue'
import store from "@/store/store";//导入store的配置文件

Vue.config.productionTip = false

new Vue({
  store,//在vue实例中引用
  render: function (h) { return h(App) },
}).$mount('#app')

在src文件夹下创建文件夹store。store下再创建store.js文件，在store.js文件中:

store分为:

state:{}该对象中声明的值在其他所有组件中都可直接调用

getters:{}监听state中的属性值是否变动,当属性值发生变动时getters会主动监测并进行改变，不需要进行显示调动；

mutations:{}同步修改store中的值

actions:{}异步的方式触发mutations，间接的实现对state的修改

modules:{}让每一个模块拥有自己的state、mutation、action、getters

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

//全局注册vuex
Vue.use(Vuex)

//定义全局的store
export default new Vuex.Store({
    state:{//Vuex核心
        //定义状态属性并进行初始化,在组件中可以通过 this.$store.state.属性名 直接获取属性值
        count:0,
        age:0
    },

    //getters:
    //(1)类似于组件的computed计算属性;
    //(2)作用:监听state中属性的变化(获取state中的值);
    //(3)用法:this.$store.getters.属性名
    getters:{
        getAge(state){//this.$store.getters.getAge可以获取到state中的age
            return state.age
        }//getAge值改变时getters会主动监测并进行改变，不需要进行显示调动
    },

    //(1)mutations的作用:用于修改state中的值
    //(2)要求：只能是同步的
    //(3)定义方法时需要注意的问题:
        //a、方法中的第一个参数默认为state
        //b、方法的第二个参数：表示调用该方法时传入的参数，本质是一个对象
    mutations:{
        addCount(state,obj){//让state的count加一个指定的值
            return state.count += obj.num
        },
        subCount(state,obj){//让state的count减一个指定的值
            return state.count -= obj.num
        }
    },
    //(1)actions的作用:异步的方式触发mutations，间接的实现对state的修改
    //(2)定义方法:在异步方法中带有一个参数context,该参数的作用是调用commit触发mutations
    actions:{
        addCountAsyn(context){//异步操作:2秒后让count加1
            setTimeout(()=>{
                //触发mutations中的方法
                context.commit('addCount',{num:1})
            },2000)
        },
        subCountAsyn(context){//异步操作:2秒后让count加1
            setTimeout(()=>{
                //触发mutations中的方法
                context.commit('subCount',{num:1})
            },2000)
        }
    },

    modules:{

    }

})

创建组件:

<template>
  <div>
    <h2>通过getters来获取vuex(store)中age属性: {{ getAge }}</h2>
    <p>Count:  {{ count }}</p>
    <button @click="handlerAdd()">同步加1</button>
    <button @click="handlerSub()">同步减1</button>
    <button @click="handlerAddAsyn()">异步加1</button>
    <button @click="handlerSubAsyn()">异步减1</button>
  </div>
</template>

<script>
export default {
  name: "Home",

  computed:{
    count(){
      return this.$store.state.count  //直接获取state的count属性值
    },
    getAge(){
      return this.$store.getters.getAge //是通过getters的getAge方法来获取state的age属性值
    }
  },

  methods:{
    handlerAdd(){//同步加1:触发mutations中的addCount方法
        this.$store.commit('addCount',{num:1})
    },
    handlerSub(){//同步减1:触发mutations中的subCount方法
      this.$store.commit('subCount',{num:1})
    },
    handlerAddAsyn(){//异步加1：触发actions中的addCountAsyn方法
      this.$store.dispatch('addCountAsyn')
    },
    handlerSubAsyn(){//异步减1：触发actions中的addCountAsyn方法
      this.$store.dispatch('subCountAsyn')
    }
  }
}
</script>

<style scoped>

</style>

在主页中调用组件:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Home />
  </div>
</template>

<script>

import Home from "@/components/Home";
export default {
  name: 'App',
  components: {
    Home,
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>