一，Vuex 解决什么问题

1，解决平级组件交互问题

2，找共同父级的问题

3，跨组件交互问题（比较父亲传值给孙子的问题）

当然，Vue官网中还提供了一种方式eventBus 也可以解决上面的问题，eventBus它是基于发布订阅模式来使用的，eventBus 不适合大型的项目，使用起来比较混乱

Vuex 主要是借鉴了flux ，redux ,redux 可以和其他框架类库搭配使用例如jQuery ，但是Vuex 是为Vue而生，只能用在Vue中

二，简单介绍Vuex 的流程图

1，当前的Vuex 的流程图是一个闭环，Vuex 严格遵循了Vue的单向数据流

2，State：用于管理公共状态，组件修改状态有两个方法，第一种方式（需要获取后台数据）：组件dispatch（派发）一个动作Actions然后提交到Mutations 中, Mutations 修改state 的状态，因为Mutations 不支持异步。第二种方式组件（不用获取后台接口），组件可以直接commit 给Mutations 进行修改状态

3，组件中修改State,如果在单个组件中修改了state，Devtools 不能监控到状态的变化，这种操作方式是不合法的，需要在Store 里面加一个stric为true ，禁止在组件中修改state的状态

三，Vuex 案例计数器（代码粘贴复制即可用）

1，Vuex使用时，先安装

npm install vue   安装vue
npm install vue-cli  -g 全局安装
vue init webpack 项目名称（不能有大写特殊字符）
npm install vuex --save

2，main.js 中的代码

import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import router from './router'
import  logger from 'vuex/dist/logger'// logger 是一个日志插件
Vue.config.productionTip = false;
Vue.use(Vuex);
// 容器是唯一的
const state={count:0}; // 状态  将统一管理的状态放在state里面
// mutations 里面  这里的目的是更改状态的
const mutations={
  add(state,count){// state 是默认放入的，是指的当前的stroe
    state.count+=count;
  },
 minus(state,count){
    state.count-=count;
 }
};
//  store  很像router   只能new一个store实例 容器只能是一个  store和Vue实例相关连
const  store=new Vuex.Store({
  state,
  mutations,
  strict:true,
  plugins:[logger()],
});
// strice 只能通过mutations  来更改状态    它的特点是不支持异步
// 计数器
new Vue({
  el: '#app',
  router,
  render: h => h(App),
  store // store 被注册到了实例上  所有组件都会有一个属性 this.$store  它指的就是store这个实例
});

3，counter组件相关代码

<template>
    <div class="count">
      计数器：<button @click="minus">-</button><br>
      <br><br><br>
      当前：{{this.$store.state.count}}<br>
      <br><br><br>
      计数器：<button @click="add">+</button>
    </div>
</template>

<script>
    export default {
        name: "counter",
      data(){
          return {
            msg:'你好'
          }
      },
      methods:{
        add(){// 提交add的mutation   第一个名字是找store里面的add  第二个参数时载荷即payload
          this.$store.commit('add',2)
        },
        minus(){// 提交add的mutation   第一个名字是找store里面的minus  第二个参数时载荷即payload
          this.$store.commit('minus',2)
        }
      },
    }
</script>

<style scoped>
  .count{
    font-size: 20px;
  }
</style>

4.logger插件

Vuex提供了日志插件logger 当state发生变化时，在控制台会打印相应的数据变化，便于开发者开发

Vuex介绍

一，Vuex 解决什么问题

二，简单介绍Vuex 的流程图

三，Vuex 案例计数器（代码粘贴复制即可用）

猜你喜欢