Vue - 8 Vuex介绍

根据慕课网的课程做的笔记

为什么要引入Vuex

单向数据流概念

我们页面是由很多个视图来组成的，用户的操作会带来视图上状态的变化，状态的变化又会来驱动视图的更新，如果说，我们的页面没有采用这种数据流的概念去开发的话，组件间的状态管理就会变得异常的复杂

我们常见的用Vuex来解决的问题如下：

• 多个视图依赖于同一状态（例：菜单导航）
• 来着不同视图的行为需要变更同一状态（例：评论弹幕）

Vuex介绍

• 为Vue.js开发的状态管理模式
• 组件状态集中管理
• 组件状态改变遵循统一的规则

Vuex代码实例-测试在other.vue组件传递一个状态到About.vue组件

测试在other.vue组件传递一个状态到About.vue组件,步骤如下：

1. 在store.js文件里的state对象里添加count:0,mutations方法集里添加increase方法，该方法每次执行则count++
2. 在other.vue组件里添加一个按钮，每次点击的时候触发一个事件，执行add方法，引入vuex,并在add函数里调用store.js文件里的increase方法
3. 将count的值显示在About.vue组件中

在store.js文件里的state对象里添加count:0,mutations方法集里添加increase方法，该方法每次执行则count++

store.js

import Vue from 'vue'
import Vuex from 'vuex'//这里引入了vuex
Vue.use(Vuex) //绑定了vuex
export default new Vuex.Store({
  state: {
//state是组件的状态，在这里做一个集中的管理
    count:0 //要传递的数据是count
  },
  mutations: {
//是唯一一个可以去改变vuex状态的一个方法集，所有的方法都是在这里面定义的
    increase(){
      this.state.count++;
    }
  },
  actions: {
  }
})

在other.vue组件里添加一个按钮，每次点击的时候触发一个事件，执行add方法，引入vuex,并在add函数里调用store.js文件里的increase方法

other.vue

<template>
  <div>这是other
    <button type="button" @click="add()">添加2</button>
  </div>
</template>

<script>
  import store from '@/store' //引入vuex,这里@的符号代表str目录
  export default {
    name: "other",
    methods: {
      add() {
        console.log("add Event in other.vue!!");
        store.commit('increase');
      }
    }
  }
</script>

<style scoped>

</style>

将count的值显示在About.vue组件中

Abount.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>{{msg}}</p>
  </div>
</template>
<script>
  import store from '@/store'
  export default {
    name:'about',
    store, //引用store
    data(){
      return{
        msg:store.state.count
      }
    }
  }
</script>

展示

切换到other页面，点击两次 添加2按钮