来自 Web前端 2020-01-25 12:06 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

简述vue状态管理模式之vuex_vue网上澳门金莎娱乐.js_脚本之家

1.安装Vuex首先在 vue 2.0+ 你的vue-cli项目中安装 vuex :

import store from './store/index.js';new Vue({ el: '#app', store, render: h => h;

2.获取state:说了上面的前奏之后,接下来就是纳入正题了,就是开篇说的state的玩法。回到store文件的index.js里面,我们先声明一个state变量,并赋值一个空对象给它,里面随便定义两个初始属性值;然后再在实例化的Vuex.Store里面传入一个空对象,并把刚声明的变量state仍里面:

如果不是很复杂的应用,一般来讲是不会分模块的

3.获取方式gettersvuex官方API提供了一个getters,和vue计算属性computed一样,来实时监听state值的变化(最新状态),并把它也扔进Vuex.Store里面,具体看下面代码:

使用 $store.dispatch 来触发 action 中的 switch_dialog 方法。

import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store(); export default store;

什么是vuex?官网说:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 按个人通俗理解来说就是:vuex就是用来管理各个组件之间的一些状态,可以理解为这些状态就是公共部分。此时任何组件都能从中获取状态或者触发一些行为事件。

时间: 2019-05-08阅读: 628标签: vuex

假如我们需要一个与状态 show 刚好相反的状态 , 使用 vue 中的 computed 可以这样算出来

做完上面的步骤,你已经可以用this.$store.state.showFooter或this.$store.state.changebleNum在任何一个组件里面获取showfooter和changebleNum定义的值了,但这不是理想的获取方式;

actions示例

然后 在src文件目录下新建一个名为store的文件夹,为方便引入并在store文件夹里新建一个index.js,里面的内容如下:

如果还有其他的组件需要使用 vuex , 就新建一个对应的状态文件 , 然后将他们加入 store 文件夹下的 index.js 文件中的 modules 中

npminstallvuex--save

那么先来看看这两个问题:

import { mapGetters } from 'vuex'export default { // ... computed: { // 使用对象展开运算符将 getter 混入 computed 对象中 ...mapGetters([ 'doneTodosCount', 'anotherGetter', // ... ]) }}
computed{ return !this.$store.state.dialog.show; }}

我们可以通过this.$store.getters.isShow和 this.$store.getters.getChangedNum 来获取

五、getters

接下来,在 main.js里面引入store,然后再全局注入一下,这样一来就可以在任何一个组件里面使用this.$store了:

export default { state: {}, getters: {}, mutations: {}, actions: {}}

import vue from 'vue';import vuex from 'vuex';import state from './state.js';import * as getters from './getters.js';import mutations from './mutations.js';import actions from './actions.js';import m1 from './modules/m1.js';import m2 from './modules/m2.js';import createLogger from 'vuex/dist/logger'; // 修改日志vue.use;const debug = process.env.NODE_ENV !== 'production'; // 开发环境中为true,否则为falseexport default new vuex.Store({ state, getters, mutations, actions, modules: { m1, m2 }, plugins: debug ? [createLogger()] : [] // 开发环境下显示vuex的状态修改});

4.mapGetters 辅助函数mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:

最后将 store 实例挂载到 main.js 里面的 vue 上去就行了

import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex); const state={ //要设置的全局访问的state对象 showFooter: true, changableNum:0 //要设置的初始属性值 };const getters = { //实时监听state值的变化(最新状态) isShow() { //方法名随意,主要是来承载变化的showFooter的值 return state.showFooter }, getChangedNum(){ //方法名随意,主要是用来承载变化的changableNum的值 return state.changebleNum }};const store = new Vuex.Store({ state, getters});export default store;

官方推荐 , 将异步操作放在 action 中

import store from './store'//引入store new Vue({ el: '#app', router, store,//使用store template: 'App/', components: { App }})
import * as types from './mutation-type.js';export default { [types.SET_NAME] { state.name = name; }, [types.SET_AGE] { state.age = age; }};
import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex); const state={//要设置的全局访问的state对象 showFooter: true, changableNum:0 //要设置的初始属性值 }; const store = new Vuex.Store({ state }); export default store;

使用 mutations 后 , 原先我们的父组件可以改为

import {mapGetters, mapMutations, mapActions} from 'vuex';/* 只写组件中的script部分 */export default { computed: { ...mapGetters }, methods: { ...mapMutations({ setName: 'SET_NAME', setAge: 'SET_AGE' }), ...mapActions }};

对 vuex 的依赖仅仅只有一个 $store.state.dialog.show 一个状态 , 但是如果我们要进行一个操作 , 需要依赖很多很多个状态 , 那管理起来又麻烦了

modules–m1.js示例

so,现在你就得来深入认识一下vuex的核心概念了。下面是个人理解的概念,首先在此之前建议最好先把官方文档Vuex2.0概念过一遍。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

mapGetters 、 mapActions 和 mapState 类似 , mapGetters 一般也写在 computed 中 , mapActions 一般写在 methods 中

getters.js 示例(我们一般使用 getters 来获取 state 的状态,而不是直接使用 state )

import * as types from './mutation-type.js';export default { nameAsyn({commit}, {age, name}) { commit; commit; }}
export default { state:{//state show:false }, mutations:{ switch_dialog{//这里的state对应着上面这个state state.show = state.show?false:true; //你还可以在这里执行其他的操作改变state } }, actions:{ switch_dialog{//这里的context和我们使用的$store拥有相同的对象和方法 context.commit; //你还可以在这里触发其他的mutations方法 }, }}
const store = new Vuex.Store({ state: { name: 'weish', age: 22 }, getters: { personInfo { return `My name is ${state.name}, I am ${state.age}`; } } mutations: { SET_AGE { commit; } }, actions: { nameAsyn { setTimeout => { commit; }, 1000); } }, modules: { a: modulesA }}

在 src 目录下 , 新建一个 store 文件夹 , 然后在里面新建一个 index.js

getters 和 vue 中的 computed 类似 , 都是用来计算 state 然后生成新的数据 的

将所有 mutations 的函数名放在这个文件里

什么情况下用到vuex?官网说:如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是,如果您需要构建是一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

export const name =  => { return state.name;}export const age =  => { return state.age}export const other =  => { return `My name is ${state.name}, I am ${state.age}.`;}

vuex 就是把需要共享的变量全部存储在一个对象里面,然后将这个对象放在顶层组件中供其他组件使用

做出这样的修改之后 , 我们将之前我们使用的 $store.state.show 统统改为 $store.state.dialog.show 即可

我们可以使用 vuex 的 modules , 把 store 文件夹下的 index.js 改成

四、actions

1.1 vuex是什么

很多时候 , $store.state.dialog.show 、 $store.dispatch 这种写法很不方便

这里我们引用了一个 dialog_store.js , 在这个 js 文件里我们就可以单独写 dialog 组件的状态了

mutations示例

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:简述vue状态管理模式之vuex_vue网上澳门金莎娱乐.js_脚本之家

关键词: