Vuex学习笔记

一、vuex概述

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex官方文档

组件之间共享数据的方式

父向子传值：v-bind属性绑定 子向父传值：v-on事件绑定 兄弟组件之间共享数据：EventBus $on接收数据的那个组件 $emit发送数据的那个组件

（但是面对大量的数据共享，就需要引用xuex

vuex定义了一个公共数据文件，方便不同组件之间的数据共享）

二、vuex的基本使用

1、利用npm包管理工具，进行安装 vuex。在控制命令行中输入下边的命令就可以了。

npm install vuex --save

要注意的是这里一定要加上 –save，因为你这个包我们在生产环境中是要使用的。

2、新建一个store文件夹（这个不是必须的），并在文件夹下新建store.js文件，文件中引入我们的vue和vuex。

import Vue from 'vue';
​
import Vuex from 'vuex';

3、使用我们vuex，引入之后用Vue.use进行引用。

import Vue from 'vue';
​
import Vuex from 'vuex';

通过这三步的操作，vuex就算引用成功了，接下来我们就可以尽情的玩耍了。

4、在main.js 中引入新建的vuex文件

import store from './store'

5、再然后 , 在实例化 Vue对象时加入 store 对象 :

new Vue({
​
 el: '#app',
​
 router,
​
 store,//使用store
​
 template: '<App/>',
​
 components: { App }
​
})

三、vuex的核心概念

3.1state

State | Vuex (vuejs.org)

State提供唯一的公共数据源，所有共享的数据都要统一放到Store（仓库）的State中进行存储。

//创建store数据源，提供唯一公共数据
const store = new Vuex.Store({
    state: {count:0}
})

组件访问State数据的第一种方式：

this.&store.state.count(全局数据名称)

mapState辅助函数

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'
​
export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,
​
    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',
​
    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

组件访问State数据的第二种方式：

//1.从vuex中按需导入mapState函数
import { mapState } from 'vuex'

通过刚才导入的mapState函数，讲当前组件需要的全局数据，映射为当前组件的computed计算属性：

//2.将全局数据，映射为当前组件的计算属性
comuted: {
  ...mapState({'count'})
}

增删state中的成员

为了配合Vue的响应式数据，我们在Mutations的方法中，应当使用Vue提供的方法来进行操作。如果使用delete或者xx.xx = xx的形式去删或增，则Vue不能对数据进行实时响应。

1、Vue.set 为某个对象设置成员的值，若不存在则新增

例如对state对象中添加一个age成员

Vue.set(state,"age",15)

2、Vue.delete 删除成员

将刚刚添加的age成员删除

Vue.delete(state,'age')

3.2Getter

Getter用于对Store中的数据进行加工处理形成新的数据。

①Getter可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。

②Store中数据发生变化，Getter的数据也会跟着变化。

(即是获取到state数据并添加样式的函数)

//定义Getter
const store new Vuex.Store({
    state:{
       count:0
},
    getters:{
      showNum:state =>{
        return'当前最新的数量是['+state.count+']'
    }
  }
})

3.3Mutation

Mutation用于变更Store中的数据。 只能通过mutation定义函数来变更Store数据，不可以直接操作Store中的数据（减少后期维护成本）。 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

（主要是防止组件用this.&store.state.count修改了全局数据，报错时维护过于麻烦问题，多个组件如果一报错就需要把修改过数据的组件一一查错，非常麻烦）

在mutation里不能执行异步操作

触发mutation的第一种方式实例：

//定义Mutation
const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    add (state) {   //事件处理函数，改变数据接受的参数永远是state！，也还可以传参
      // 变更状态
      state.count++   //定义了一个递增add函数
    }
  }
})

//触发mutation
methods: {
    handlel() {
    //触发mutation的第一种方式
    this.$store.commit('add')
    }
}

触发mutation的第二种方式：

//从vuex中按需导入mapMutations函数
import {mapMutations} from 'vuex'

通过刚才导入的mapMutations函数，将需要的mutations函数，映射为当前组件的methods方法：

//将指定的mapMutations函数，映射为当前组件的methods函数
methods: {
	...mapMutations({'add'}),
	handler(){
	this.add() //调用add()函数
	}
}

3.4Action

Action用于处理异步任务。 如果通过异步操作变更数据，必须通过Action,而不能使用Mutation,但是在Action中还是要通过触发 Mutation的方式间接变更数据。（依旧是只能用mutation函数能修改state数据的原则）

context也就相对Vue.Store

dispath函数是专门用来触发action

推荐文章：

实例详解VUEX,大大滴推荐！！！