您的位置: 首页  >  文章  >  vuex使用总结

vuex使用总结

分类: 文章 • 2024-01-24 22:14:28

VUEX是什么？

官方概念：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
个人理解：Vuex 就是前端为了方便数据的操作而建立的一个“前端数据库”。主要用于多个组件间的数据通信和状态管理；用户界面负责触发动作（Action)进而改变对应状态（State），从而反映到视图（View）上。如下图所示：
vuex使用总结

使用VUEX

安装：

npm install --save vuex

引入：


import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)

VUEX组成部分

完整的Vuex开发的应用结构：
vuex使用总结

VUEX理解

vuex 是” 前端的数据库“。State 就是数据库。Mutations 就是我们把数据存入数据库的 API，用来修改state 的。getters 是我们从数据库里取数据的 API，取数据时不能对数据库进行修改，所以getters 是一个”纯函数“，就是不会对原数据造成影响的函数，比如数组的concat（）方法、slice（）方法；与之对应的是数组的push（）方法、splice（）方法，他们会改变原数组的值。从页面获取到数据向state里面存储时，需要对数据进行处理，处理完成之后再存储到state中，这就是action的过程，当然也可以不作处理直接存储到数据库，所以vuex也可以在action中直接存储，直接mutation。然后我们把这几部分用store 包一下，vuex就生成了。

上手VUEX

首先我们需要先使用vue-cli去初始化一个项目。项目创建完成之后，在src下创建store文件夹。这个store文件夹，就是我们放置vuex文件的地方。
vuex使用总结
在store文件夹下创建 index.js 作为我们生成vuex的文件。

// index.js
import Vue from 'vue'; 
import Vuex from 'vuex';

// 需要注册vuex到vue中
Vue.use(Vuex);

// 使用 es6 语法把vuex的实例对象输出
export default new Vuex.Store({
})

然后在vue的初始文件中注册vuex的实例（main.js）：

import store from './store'

new Vue({
    ...
      store
})

以下是一个简单的VUEX范例：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    // 在state中去声明全局变量，可以通过 this.$store.state 访问
    state: {
        count: 0
    },
    // 在getters中声明state中变量的计算函数，缓存计算后的数据， 通过 this.$store.getters 调用
    getters: {
        // 接受state作为参数，每次 count发生变化时 ， 都会被调用
        consoleCount: state => {
            console.log('the state count : ' + state.count);
        }
    },
    // 只能执行同步方法，不要去执行异步方法 通过 this.$store.commit 方法去调用
    mutations: {
        // 改变state状态的方法，不建议直接通过  
        // this.$store.state.? = ？的方式改变state中的状态
        addCount: state => {
            ++state.count;
        },
        // mutations的第一个参数即为 state对象，并且可以向mutation传入额外的参数
        addNumCount: (state, n) => {
            state.count+=n;
        },
    },
    // 借助actions的手去 执行 mutations ， 通过  this.$store.dispatch 的方式调用
    // 可以用来执行异步操作，可以跟踪异步数据状态变化
    actions: {
        addCount: context => {
            // 调用 mutation
            context.commit('addCount');
        },
        addNumCount: (context, n) => {
            context.commit('addNumCount', n);
        }
    }
})

也可以通过以下方式来搭建VUEX：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
import state from './state'
import mutations from './mutations'
import getters from './getters'
import actions from './actions'
export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})
//分别创建state、getters、mutations、actions文件并在index。js进行声明

Vuex 允许我们将 store 分割成模块。每个模块拥有自己的 state、mutations、actions、getters、甚至是嵌套子模块——从上至下进行同样方式的分割，以下为一种 vuex modules 的展示：

相关推荐