Vuex

最新推荐文章于 2024-04-02 14:36:18 发布

原创最新推荐文章于 2024-04-02 14:36:18 发布 · 349 阅读

CC 4.0 BY-SA版权

文章标签：

42 篇文章

订阅专栏

一、vuex是什么

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

1、vue组件 -> Dispatch派发 -> action

2、action -> commit提交 -> mutation

3、mutation -> mutate修改 -> state

4、state -> render渲染 -> vue组件

state

actions

mutations

getters

ActionType

中大型单页面应用（登录、购物车、tab选项卡）

vuex中的状态，类似全局变量，刷新就会变成初始值。如果你想保存值得话，就要结合sessionStorage或localStorage。

问：sessionStorage 与vuex的区别

最重要的区别：vuex存储在内存，sessionStorage则以文件的方式存储在本地。

应用场景：vuex用于组件之间的传值，sessionStorage则主要用于不同页面之间的传值。

永久性：当刷新页面时vuex存储的值会丢失，sessionStorage不会。

注：很多同学觉得用sessionStorage可以代替vuex，对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组〉时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，sessionStorage无法做到，原因就是区别。

1、创建store，并暴露

new Vuex.Store({
    state:{},
    actions:{},
    mutations:{},
    getters:{}
})

2、main.js中引入store

import 导入

store对象注入到Vue实例中

3、使用vuex中的状态或actions

方法一：

//组件内，获取状态和行为
import {mapGetters, mapActions} from 'vuex'

// mapGetters 写在computed 
// mapActions 写在methods

方法二：

this.$store.state  // 获取状态（不推荐）

this.$store.dispatch('行为名称');  // 调用行为