是什么Vuex？

最新推荐文章于 2024-09-09 14:50:46 发布

ToDeer

最新推荐文章于 2024-09-09 14:50:46 发布

阅读量143

点赞数

分类专栏： Vue 文章标签： vue css javascript html5 css3

本文链接：https://blog.csdn.net/weixin_46031235/article/details/107303044

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

是什么 Vuex？

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

简单来说：Vuex 的目的是为了管理共享状态，为了达到这个目的，它制定了一系列的规则，比如修改数据源 state、触发 actions 等等，都需要遵循它的规则，以此来达到让项目结构更加清晰且易于维护的目的

Vuex在项目中的应用

首先vuex的搭建 (准备工作)

安装vuex：cnpm i install vuex -S
创建一个store文件夹，在里面创建一个index.js文件内容如下：

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
import Vuexpersistence from "vuex-persist";//vuex长久存储
import person from "./person"; //另一个子模块
const vuexLocal = new Vuexpersistence({
    storage: window.localStorage
})

export default new Vuex.Store({
    modules: {
    person  //store中的子模块
    },
    state: {
    searchword:""
    },
    mutations: {
    },
    actions: {
    }
})

在main.js中引入store

import store from './store'

在main.js 中，在vue实例中添加store对象

new Vue({
  el: '#app',
  router,
  store, //手动添加
  components: { App },
  template: '<App/>'
})

运行脚手架

vuex的五大核心

一. Vuex中的state

state：存储状态（变量）

 state:{
        searchword:"",    
    },

二. Vuex中的mutations

mutations: 修改状态，并且是同步的 ,用来修改state的状态，当从组件中派发一个action,在actions,里面接收，通过actions里面的commit来触发mutations中的方法，从而来改变状态。

mutations:{
updateSearch(state,item){
      state.searchword=item
    },
}
actions:{
updateSearch(context,item){
        context.commit("updateSearch",item)
      },
}
 //vue文件中
methods: {
        click_item(item){
            this.$store.dispatch('updateSearch',item);
        },

三.Vuex中的actions

actions：异步操作。在组件中使用是$store.dispath(’’")来派发action,
actions用来处理mutations中的异步操作，触发mutations中的函数

四. Vuex中的getters

getter：从基本数据（state）派生的数据，相当于state的计算属性

五. Vuex中的modules

store 的子模块，为了开发大型项目，方便状态管理而使用的。

//在主模块中引入且注册
import person from "./person"
modules: {
    person  //store中的子模块
    },
//person子模块
export default {
    namespaced:true,//命名空间 该文件下的 所有属性 不在和其他vuex模块混用
    state:{
        mobile:15036630514,    
    },
    getters:{
    },
    mutations:{
        }
    },
    actions:{
    },

}

Vuex中的plugins

plugins:可以添加一些插件如下：

import Vuexpersistence from "vuex-persist";//vuex长久存储
const vuexLocal = new Vuexpersistence({
    storage: window.localStorage
})
export default new Vuex.Store({
    modules: {
        person
    },
    plugins: [vuexLocal.plugin],//plugin插件 添加了长久储存的插件
    state: {
        n: 20,
    },
    mutations: {
    ADD_N(state, val) {
            state.n += val;
        }
        }
    },
    actions: {
    }
})

Vuex中的辅助函数

辅助函数
通过辅助函数mapState、mapActions、mapMutations，把vuex.store中的属性映射到vue实例身上，这样在vue实例中就能访问vuex.store中的属性了，对于操作vuex.store就很方便了。
state的辅助函数为mapState，
actions的辅助函数为mapActions，
mutations的辅助函数为mapMutations。
（Vuex实例身上有mapState、mapActions、mapMutations属性，属性值都是函数）