一.vuex的介绍

vuex是什么？

(精简)对vue中多个组件的共享状态进行集中式管理

vuex的作用(优点)？

  vuex可以优化解决的问题：
    ①将数据及其操作数据的行为都定义在父组件里面
    ②还需要将数据及其数据操作的行为传递给各个子组件当中(有可能需要多级传递)
起到了优化代码的作用。

vuex的单向数据流(图解)

在这里插入图片描述

二.vuex的使用相关

安装vuex（命令：npm install --save vuex）–>vuex固定结构(创建一个store.js文件)–>在main.js中引入–>使用

vuex插件的下载命令

npm install --save vuex

vuex的使用

①创建一个store.js文件，并在其中有以下固定写法：

/*
* vuex的核心管理对象模块：store
* */
import Vue from "vue";
import Vuex from "vuex";
//声明使用Vuex
Vue.use(Vuex);

//状态对象
const state = {
    
    

};
//包含多个更新state函数的对象
const mutations = {
    
    

};
//包含多个对应事件回调函数的对象
const actions = {
    
    

};
//包含多个getter计算属性函数的对象
const getters = {
    
    

}
export default new Vuex.Store({
    
    
  state,//状态对象
  mutations,//包含多个更新state函数的对象
  actions,//包含多个对应事件回调函数的对象
  getters//包含多个getter计算属性函数的对象
  }
)

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

在这里插入图片描述

③将组件中相关信息写入到 $store 属性中的四个对象(state 、mutations、actions、getters)中,来依据下图中数据流的逻辑：
在这里插入图片描述
代码示例
1.store.js文件

/*
* vuex的核心管理对象模块：store
* */
import Vue from "vue";
import Vuex from "vuex";
//声明使用Vuex
Vue.use(Vuex);

//状态对象
const state = {
    
    //初始化数据
  count: 0
};
//包含多个更新state函数的对象
const mutations = {
    
    
  INCREMENT(state){
    
    
    state.count++;
  },
  DECREMNENT(state){
    
    
    state.count--;
  }
};
//包含多个对应事件回调函数的对象
const actions = {
    
    
  increment({
    
    commit}){
    
    
    commit("INCREMENT");
  },
  decrement({
    
    commit}){
    
    
    commit("DECREMNENT")
  },
  incrementIfOdd({
    
    commit,state}){
    
     //注意此处将commit方法作为参数的写法
    if(state.count%2===1){
    
    
      commit("INCREMENT");
    }
  },
  incrementAsnyc({
    
    commit}){
    
    
    setTimeout(()=>{
    
    
      commit("INCREMENT")
    },1000)
  }
};
//包含多个getter计算属性函数的对象
const getters = {
    
    
  evenOrOdd (state) {
    
    
    return state.count%2===0 ? "偶数": "奇数";
  }
}
export default new Vuex.Store({
    
    
  state,//状态对象
  mutations,//包含多个更新state函数的对象
  actions,//包含多个对应事件回调函数的对象
  getters//包含多个getter计算属性函数的对象
  }
)

2.App.vue组件

<template>
    <div>
        <p> clicked {
   
   {$store.state.count}} times, count is {
   
   {evenOrOdd}}</p>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementIfOdd">increment if odd</button>
        <button @click="incrementAsync">increment asnyc</button>
    </div>
</template>

<script>
    export default {

        computed: {
            evenOrOdd() {
              return this.$store.getters.evenOrOdd;//evenOrOdd为回调函数，不需要在后面加括号

            }
        },
        methods:{
            //count增加1
            increment() {
              //通知vuex去增加
              this.$store.dispatch("increment");//触发store中对应的actions调用
            },
            //count减少1
            decrement() {
                this.$store.dispatch("decrement")
            },
            //如果是奇才增加
            incrementIfOdd() {
               this.$store.dispatch("incrementIfOdd")
            },
            //过1秒才增加
            incrementAsync() {//异步增加：每一秒count增加1
               this.$store.dispatch("incrementAsnyc")
            }

        }

    }
</script>

3.main.js入口（一旦将store写在template中进行使用组件，则所有子组件会有$store属性(store对象)）

import Vue from "vue"
import App from "./App"
//引入vuex.js文件
import store from "./store"

new Vue({
    
    
    el:"#app",
    components:{
    
    
        App
    },
    template: "<App/>",
              store//所有组件都会多一个对象 $store
})

35-vue中vuex(实现组件的集中管理)的介绍和使用