Vuex内容解析和vue cli项目中使用状态管理模式Vuex

  中文文档:vuex官方中文网站

一、vuex里面都有些什么内容?

const store = new Vuex.Store({
    state: {
        name: ‘weish‘,
        age: 22
    },
    getters: {
        personInfo(state) {
            return `My name is ${state.name}, I am ${state.age}`;
        }
    }
    mutations: {
        SET_AGE(state, age) {
            commit(age, age);
        }
    },
    actions: {
        nameAsyn({commit}) {
            setTimeout(() => {
                commit(‘SET_AGE‘, 18);
            }, 1000);
        }
    },
    modules: {
        a: modulesA
    }
}

  这个就是最基本也是完整的vuex代码:

  vuex 包含有五个基本的对象:

  1、state:存储状态,也就是全局变量;

  2、getters:派生状态。也就是set、get中的get,有两个可选参数:state、getters,分别可以获取state中的变量和其他的getters。外部调用方式:store.getters.personInfo(),就和vue的computed差不多;

  3、mutations:提交状态修改。也就是set、get中的set,这是vuex中唯一修改state的方式,但不支持异步操作。第一个参数默认是state,外部调用方式:store.commit(‘SET_AGE‘, 18),和vue中的methods类似。

  4、actions:和mutations类似,不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式:store.dispatch(‘nameAsyn‘)

  5、modulesstore的子模块,内容就相当于是store的一个实例。调用方式和前面介绍的相似,只是要加上当前子模块名,如:store.a.getters.xxx()

二、vue-cli中使用vuex的方式

  一般来讲,我们都会采用vue-cli来进行实际的开发,在vue-cli中,开发和调用方式稍微不同。

├── index.html
├── main.js
├── components
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── state.js          # 根级别的 state
    ├── getters.js        # 根级别的 getter
    ├── mutation-types.js # 根级别的mutations名称(官方推荐mutions方法名使用大写)
    ├── mutations.js      # 根级别的 mutation
    ├── actions.js        # 根级别的 action
    └── modules
        ├── m1.js         # 模块1
        └── m2.js         # 模块2

  state.js示例:

const state = {
    name: ‘weish‘,
    age: 22
};

export default state;

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

export const name = (state) => {
    return state.name;
}

export const age = (state) => {
    return state.age
}

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

  mutation-type.js示例(我们会将所有mutations的函数名放在这个文件里):

export const SET_NAME = ‘SET_NAME‘;
export const SET_AGE = ‘SET_AGE‘;

  mutations.js示例:

import * as types from ‘./mutation-type.js‘;

export default {
    [types.SET_NAME](state, name) {
        state.name = name;
    },
    [types.SET_AGE](state, age) {
        state.age = age;
    }
};

  actions.js示例(异步操作、多个commit时):

import * as types from ‘./mutation-type.js‘;

export default {
    nameAsyn({commit}, {age, name}) {
        commit(types.SET_NAME, name);
        commit(types.SET_AGE, age);
    }
};

  modules--m1.js示例(如果不是很复杂的应用,一般来讲是不会分模块的):

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

  index.js示例(组装vuex):

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(vuex);

const debug = process.env.NODE_ENV !== ‘production‘; // 开发环境中为true,否则为false

export default new vuex.Store({
    state,
    getters,
    mutations,
    actions,
    modules: {
        m1,
        m2
    },
    plugins: debug ? [createLogger()] : [] // 开发环境下显示vuex的状态修改
});

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

import store from ‘./store/index.js‘;

new Vue({
  el: ‘#app‘,
  store,
  render: h => h(App)
});

  在vue组件中使用时,我们通常会使用mapGettersmapActionsmapMutations,然后就可以按照vue调用methods和computed的方式去调用这些变量或函数,示例如下:

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

  以上就是 vuex 的相关知识,其实vuex很简单,多用几次就会熟悉了。

原文地址:https://www.cnblogs.com/goloving/p/8947818.html

时间: 2024-11-05 16:23:33

Vuex内容解析和vue cli项目中使用状态管理模式Vuex的相关文章

理解Vue的状态管理模式Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 状态管理模式.集中式存储管理,一听就很高大上,蛮吓人的.在我看来 vuex 就是把需要共享的变量全部存储在一个对象里面,然后将这个对象放在顶层组件中供其他组件使用.这么说吧,将vue想作是一个js文件.组件是函数,那么vuex就是一个全局变量,只是这个"全局变量"包含了一些特定的规则而已. 在vue的组件化开发中,经常会遇到需要将

4-Vue中的状态管理模式

安装 npm install vuex --save 在自定义文件夹中的index.js中书写内容 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { user: { } }, mutations: { login (state,user) { state.user=user; } } }) 如 将其注入到vue中 存入 取出 computed: 

Vue中的状态管理器 - Vuex

我们知道vue是组件式开发的,当你的项目越来越大后,每个组件背后的数据也会变得越来越难以理顺, 这个时候你就可以考虑使用vuex了. 备注: 官方建议小项目不要使用,引入vuex会带来新的概念和模式,这对于新手而言理解上本身有难度,而且小项目中vuex发挥的功效确实不怎么明显, 反而增加了开发难度,就像后端项目中常说的 过度设计. 说了这么多,下面介入正题(以下讲解需要一个空的vue项目,推荐使用 vue-cli 创建,快速搭建一个vue开发环境 ): vuex的作用就是作为一个数据仓库(sto

Vue状态管理之Vuex

Vuex是专为Vue.js设计的状态管理模式.采用集中存储组件状态它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 1.首先让我们从一个vue的计数应用开始 new Vue({ // state data () { return { count: 0 } }, // view template: ` <div>{{ count }}</div> `, // actions methods: { increment () { this.co

项目中的软件测试管理分析

项目中的软件测试管理分析

基于vue前端状态管理模式

本文仅介绍及区分localstorage.vuex以及vue的全局变量.组件. 一.localstorage简介 localStorage.sessionStorage以及cookie都是在浏览器用来存储数据的,只是作用于浏览器,不会存在与服务器交互的情况.sessionStorage只在当前的域名中有效,重新打开一个新窗口就会重新创建一个sessionStorage对象.而localstorage会一直存在,直到我们手动清除浏览器数据,否则会一直存在浏览器中. 二.vuex简介 vuex是专门

flutter中的状态管理Provider

今天简单说一下flutter中的状态管理,我们这次使用provider: ps:先说一个概念,Model,模型,这里面定义了我们准备全局使用的数据,或者方法: 举个栗子:我们有一个User类,用来储存用户的信息,比如登录之后,我们会拿到用户的一些个人数据,那么这些数据就可以作为属性写在Model里,同时我们在User内部,还会提供一个upUser方法,用来更新用户信息,那么这个方法也可以写在Model中,OK,以上就是我们准备的User Model; 下面是正题,go,go,go 一.Provi

Vue 实际项目中你可能会遇见的坑

纸上得来终觉浅,绝知此事要躬行! Vue的文档和教程看的太多,小的demo做的多,也不如自己实际的进行一个完整项目的开发.只有做了才知道原来问题这么多,这里列举了一些你做demo教程可能不会遇见的坑. 一.项目的登录拦截及用户权限访问控制问题. 一个很常见的需求就是对未登录的用户进行路由拦截和用户的权限访问,如果你的项目之前是通过后台控制访问路由的,那么之前的后端现在可能需要在前端也需要控制了,由于我们用vue脚手架搭建的都是纯前端的路由访问,先看看我们的一般的项目路径: 你可能会注意到Vue的

Vue 实际项目中你可能会遇见问题

纸上得来终觉浅,绝知此事要躬行! Vue的文档和教程看的太多,小的demo做的多,也不如自己实际的进行一个完整项目的开发.只有做了才知道原来问题这么多,这里列举了一些你做demo教程可能不会遇见的坑. 一.项目的登录拦截及用户权限访问控制问题. 一个很常见的需求就是对未登录的用户进行路由拦截和用户的权限访问,如果你的项目之前是通过后台控制访问路由的,那么之前的后端现在可能需要在前端也需要控制了,由于我们用vue脚手架搭建的都是纯前端的路由访问,先看看我们的一般的项目路径: 你可能会注意到Vue的