一文让你看懂什么是vuex vue.js前端

一文让你看懂什么是vuex

为什么会有Vuex ?

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

vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题。

结论

修改state状态必须通过mutations
mutations只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行
执行异步代码，要通过actions，然后将数据提交给mutations才可以完成
state的状态即共享数据可以在组件中引用
组件中可以调用action

vuex基础-初始化功能

建立一个新的脚手架项目, 在项目中应用vuex

$ vue createdemo

开始vuex的初始化建立，选择模式时，选择默认模式

初始化：

第一步：npm i vuex --save => 安装到运行时依赖 => 项目上线之后依然使用的依赖 ,开发时依赖 => 开发调试时使用

开发时依赖就是开开发的时候，需要的依赖，运行时依赖，项目上线运行时依然需要的

第二步：在main.js中 import Vuex from 'vuex'
第三步：在main.js中 Vue.use(Vuex) => 调用了 vuex中的一个install方法
第四步：const store = new Vuex.Store({...配置项})
第五步：在根实例配置 store 选项指向 store 实例对象

import Vue from 'vue' import Vuex from 'vuex' Vue.use(vuex) const store = new Vuex.Store({}) new Vue({ el: '#app', store })

vuex基础-state state是放置所有公共状态的属性，如果你有一个公共状态数据，你只需要定义在 state对象中
定义state

// 初始化vuex对象 const store = new Vuex.Store({ state: { // 管理数据 count: 0 } })

如何在组件中获取count?

原始形式- 插值表达式
App.vue
组件中可以使用 this.$store 获取到vuex中的store对象实例，可通过state属性属性获取count，如下

state的数据：{{ $store.state.count }}

【一文让你看懂什么是vuex】计算属性 - 将state属性定义在计算属性中

// 把state中数据，定义在组件内的计算属性中 computed: { count () { return this.$store.state.count } }

state的数据：{{ count }}

辅助函数 - mapState

mapState是辅助函数，帮助我们把store中的数据映射到组件的计算属性中, 它属于一种方便用法

用法：第一步：导入mapState

import { mapState } from 'vuex'

第二步：采用数组形式引入state属性

mapState(['count'])

上面代码的最终得到的是类似

count () { return this.$store.state.count }

第三步：利用延展运算符将导出的状态映射给计算属性

computed: { ...mapState(['count']) }

state的数据：{{ count }}

vuex基础-mutations

state数据的修改只能通过mutations，并且mutations必须是同步更新，目的是形成 数据快照

数据快照：一次mutation的执行，立刻得到一种视图状态，因为是立刻，所以必须是同步
定义mutations

const store= new Vuex.Store({ state: { count: 0 }, // 定义mutations mutations: {} })

格式说明
mutations是一个对象，对象中存放修改state的方法

mutations: { // 方法里参数第一个参数是当前store的state属性 // payload 载荷运输参数调用mutaiions的时候可以传递参数传递载荷 addCount (state) { state.count += 1 } },

如何在组件中调用mutations

原始形式-$store

新建组件child-a.vue，内容为一个button按钮，点击按钮调用mutations

带参数的传递

addCount (state, payload) { state.count += payload } this.$store.commit('addCount', 10)

辅助函数 - mapMutations

mapMutations和mapState很像，它把位于mutations中的方法提取了出来，我们可以将它导入

import{ mapMutations } from 'vuex' methods: { ...mapMutations(['addCount']) }

上面代码的含义是将mutations的方法导入了methods中，等同于

methods: { // commit(方法名, 载荷参数) addCount () { this.$store.commit('addCount') } }

此时，就可以直接通过this.addCount调用了

但是请注意： Vuex中mutations中要求不能写异步代码，如果有异步的ajax请求，应该放置在actions中
vuex基础-actions

state是存放数据的，mutations是同步更新数据，actions则负责进行异步操作

定义actions

actions: { //获取异步的数据 context表示当前的store的实例可以通过 context.state 获取状态也可以通过context.commit 来提交mutations，也可以 context.diapatch调用其他的action getAsyncCount (context) { setTimeout(function(){ // 一秒钟之后要给一个数去修改state context.commit('addCount', 123) }, 1000) } }

原始调用 - $store