如何使用vuex

官方文档是这样介绍Vuex的，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。在我理解，简单的白话来说，就是管理(读/写)各个页面或者各个组件都需要使用的数据。

github站点: https://github.com/vuejs/vuex

在线文档: https://vuex.vuejs.org/zh-cn/

安装Vuex：npm install vuex --save

下面我们先来了解Vuex的核心概念：

1.state

vuex管理的状态对象，它应该是唯一的，类似于vue中的data，用于初始化数据

2.mutation

包含多个直接更新state的方法(回调函数)的对象，通过action中的commit('mutation名称')，只能包含同步的代码, 不能写异步代码

3.action

包含多个事件回调函数的对象，可以处理异步，通过组件中$store.dispatch('action名称')触发，不能直接修改state，首先在组件中通过dispatch触发action，然后在action函数内部commit触发mutation，通过mutation修改state状态值

4.getters

包含多个计算属性(get)的对象，相当于vue中的computed,依赖于state状态值，状态值一旦改变，getter会重新计算，也就是说，当一个数据依赖于另一个数据发生变化时，就要使用getter

5.modules

包含多个module，一个module是一个store的配置对象，与一个组件(包含有共享数据)对应

具体使用方法：

一、store/index.js 初始化

// 导入vue及vuex import Vue from 'vue' import Vuex from 'vuex' // 挂载vuex Vue.use(Vuex) // 创建vuex对象并向外暴露 export default new Vuex.Store({ // 全局属性变量 state: { }, // 全局同步方法, 调用方法,this.$store.commit("xxx") mutations: { }, // 异步方法 调用方法,this.$store.dispatch("xxx") actions: { }, // Vuex属性计算,在视图里面当变量使用 getters: { }, // 模块化注册 modules: { } })

二、src/main.js 注入store

法一：

// 导入 import store from './store/index.js' // 挂载到Vue实力上，全局可通过this.$store进行调用 Vue.prototype.$store = store

法二

import store from './store.js' new Vue({ store })

三、设置state初始值（store/index.js）

state: { data:0 },

四、组件内获取state

this.$store.state.data

五、直接通过mutations修改state

1.store/index.js

给mutations添加方法

mutations: { changeDataByMutations(state, params) { state.data = params } }

2.组件内触发mutations方法

通过mutation改数据

methods:{ changeDataByMut:function(){ // 通过commit 触发 mutation 并传参 this.$store.commit('changeDataByMutations', 10) //此时组件1和组件2中data都是10啦 } }

六、通过action修改state

1.store/index.js

给action添加方法

actions: { changeDataByAction(context, params) { //context是一个对象，从它里面把咱们需要的commit方法解构出来 let {commit} = context commit('changeDataByMutations', params) } }

2.组件内触发action方法

通过action改数据

methods: { changeDataByAct: function() { // 通过dispatch 触发 action 并传参 this.$store.dispatch('changeDataByAction', 100) //此时data就变成100啦，并且组件1和组件2是同步的 } }

七、getter的使用

1.store/index.js

getters: { doubleGet(state) { return state.data * 2 } }

2.组件内获取getter计算的值

this.$store.getters.doubleGet

下附图片两张，以供参考。

vuex思维导图

vuex流程图

Vue

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。