No.66 Vue---vue状态管理（Vuex）

一、vue状态管理（Vuex）

• 可以理解为组件与组件之间的数据管理。
• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式+库。
• 它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
• 简单来说，状态管理可以理解成为了更方便的管理组件之间的数据交互，提供了一个集中式的管理方案，任何组件都可以按照指定的方式进行读取和改变数据.

 

1.1 引入Vuex

1.创建一个项目 vue create vuex-demo3

2.cd vuex-demo3

3. 安装vuex

 4. 启动项目

5.配置vuex

在src文件夹下创建文件夹store，在store下创建文件index.js

在index.js 中写入：

 6.在主文件中main.js 引入

 7.在组件中读取状态(任意组件）

 

 二、vue状态管理的核心（操作vuex）

 1.创建项目

 这次在创建的时候勾选vuex

进入项目，启动项目

 

 

 2.Getter

对Vuex中的数据进行过滤.

在index.js文件中写getters的方法：

 

在HomeView.vue组件中读取一下。（读取方法1）

 效果：

 

读取方法2：

 结果：

 

 

3. Mutation

• 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数.

第一步在index.js中添加函数。

 第二步在HomeView.vue组件中读取

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <h3>home</h3>
    <!-- <p>counter = {{ $store.getters.getCounter }}</p> -->
     <p>{{ getCounter }}</p>

     <!-- mutation测试 -->
    <button @click="addClickHandle">增加</button>

    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

import { mapGetters } from 'vuex';

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  },

  computed:{
    ...mapGetters(["getCounter"])
  },

  methods:{
    addClickHandle(){
      //固定调用方式
      this.$store.commit("addCounter")
    }
  }
}
</script>

　效果：

 

4.Action

• Action 类似于 mutation，不同在于:
  • Action 提交的是 mutation，而不是直接变更状态
  • Action 可以包含任意异步操作(网络请求）

 

第一步Ctrl+c 停止项目，安装axios. npm install --save axios

第二步启动服务。npm run serve