您的位置：首页 >> Vue >> 《和小米一起学Vue.js》— vuex

《和小米一起学Vue.js》— vuex

[ 孤狼 | 2023-01-09 13:05:41 | Vue | 1543°C | 0条评论 ]

Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式 。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension ，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

说人话就是vue的前端数据库，用来保存变量方法等等。


简单的vuex

安装完Vuex之后，我们在src目录下新建一个store目录，在store目录下新建一个index.js文件，如果使用cli方式创建项目，项目目录下会自动创建。

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

简单的来理解这些内容就是:

state 用来保存一些公用的变量

getters 获取数据的方法组

mutations 同步设置数据方法组

actions 异步设置数据方法组

modules 模块(子vuex对象,方便多个不同功能独立管理)


vuex工作路径



state

state用来保存我们的一些公用元数据，比如用户信息等等。我们可以通过 $store.state 对象直接调用并使用它

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    name:'张三'
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})
<template>
  <div id="app">
    {{$store.state.name}}
  </div>
</template>

<script>
  export default{
    name:"app",
  }
</script>

这时候，页面上就会显示 “张三”


TIP：我们可以通过 $store.state.name='lisi' 方式来直接修改 state 对象的值，但是这样会导致vue无法监控状态改变，所以并不推荐直接修改，而是通过 mutations 来设置变量的值。


getters 

我们可以通过 getters 来获取处理后的 state 里的值，类似于计算属性

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    name:'张三'
  },
  getters: {
    getname:(state)=>{
      return state.name+'OK';
    }
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

上面的 changename 就是一个获取数据方法，他默认传参为state，可以传其他getters作为第二参数。

在使用的时候也是直接调用即可

<template>
  <div id="app">
    {{$store.state.name}}
    {{$store.getters.getname}}
  </div>
</template>

<script>
  export default{
    name:"app",
  }
</script>



mutations 

如果要修改 state 里的值，我们不推荐直接修改state，虽然最后能生效但是无法被vue检测到，会导致一定的风险，所以推荐使用 mutations 来统一修改。每个 mutation 都有一个字符串的 事件类型 （type） 和 一个 回调函数 （handler）。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    name:'张三'
  },
  getters: {
    getname:(state)=>{
      return state.name+'OK';
    }
  },
  mutations: {
    changename (state){
      state.name="李四"
    }
  },
  actions: {
  },
  modules: {
  }
})
<template>
  <div id="app">
    {{$store.state.name}}
    {{$store.getters.getname}}
    <button @click="changename">修改名称</button>
  </div>
</template>

<script>
  export default{
    name:"app",
    methods: {
      changename(){
        this.$store.commit('changename');
      }
    }
  }
</script>

vue 在调用 mutations 里的方法的时候，必须使用 this.$store.commit（‘方法名’）； 的方式来提交调用。

如果需要提交的时候同时带上变量，就需要用到 提交载荷-payload ，可以提交变量值或一个对象

mutations: {
    changename (state){
      state.name="李四"
    },
    changename2 (state,name){
      state.name=name
    },
    changename3 (state,obj){
      state.name=obj.name
    },
    changename4 (state,obj){
      state.name=obj.name
    }
  },
<template>
  <div id="app">
    {{$store.state.name}}
    {{$store.getters.getname}}
    <button @click="cname">修改名称</button>
    <button @click="cname2">修改名称2</button>
    <button @click="cname3">修改名称3</button>
    <button @click="cname4">修改名称4</button>
  </div>
</template>

<script>
  export default{
    name:"app",
    methods: {
      cname(){
        this.$store.commit('changename');
      },
      cname2(){
        this.$store.commit('changename2','王五');
      },
      cname3(){
        this.$store.commit('changename3',{name:'万物'});
      },
      cname4(){
        this.$store.commit({type:'changename4',name:'xiaojian'});
      }
    }
  }
</script>


actions

Action 类似于 mutation，但是Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。


基本执行过程就是，先使用 dispatch 方法触发 actions 里的异步方法，然后在 actions 的异步方法里，同步调用 mutation 的方法来修改。所以， mutation 使用的几种提交数据的方法 actions 里也可以用

actions: {
    achangename (context){
      //模拟异步
      setTimeout(() => {
        //异步完毕之后,调用同步方法
        context.commit('changename2','张飞');
      }, 2000);
    },
    achangename2 (context,name){
      setTimeout(() => {
        context.commit('changename2',name);
      }, 2000);
    },
    achangename3 (context,obj){
      setTimeout(() => {
        context.commit('changename2',obj.name);
      }, 2000);
    }
  },
methods: {
      cname(){
        this.$store.commit('changename');
      },
      cname2(){
        this.$store.commit('changename2','王五');
      },
      cname3(){
        this.$store.commit('changename3',{name:'万物'});
      },
      cname4(){
        this.$store.commit({type:'changename4',name:'xiaojian'});
      },
      acname(){
        this.$store.dispatch('achangename');
      },
      acname2(){
        this.$store.dispatch('achangename2','我擦');
      },
      acname3(){
        this.$store.dispatch('achangename3',{name:'噢哈哈'});
      },
      acname4(){
        this.$store.dispatch({type:'achangename3',name:'嗯哼哼'});
      }

    }


modules 

Vuex 允许我们将 store 分割成 模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  state: {
    name:'我是moduleA'
  },
  mutations: {},
  actions: {},
  getters: {
    getnameA:(state,getters,rootState)=>{
      return state.name+'OK'+rootState.name;
    }
  }
}

const moduleB = {
  state: {
    name:'我是moduleB'
  },
  mutations: {},
  actions: {},
  getters: {}
}

export default new Vuex.Store({
  state: {
    name:'张三'
  },
  getters: {},
  mutations: {},
  actions: {},
  modules: {
    a:moduleA,
    b:moduleB
  }
})

调用方式

{{$store.state.a.name}}

TIP：注意这里虽然看着 modules 是独立的，但是在实际使用的时候是合并在一起调用的，所以也是通过 state.a 方式调用，modules里的state数据会单独以对象的形式保存在总state下 保存如下图。

TIP：除了 state 以外，其他的 modeles 方法（getters，actions，mutations）都是合并保存的，所以不能重名。避免错误。保存如下图。如果想完全独立，可以使用命名空间来独立调用 namespaced: true


在上面的代码中，可以看到modules下的方法有第三个参数 rootState 他对应的就是默认的 state


模块分割

由于一个index.js文件里要保存很多方法和数据，这样不利于管理，所以一般都要分割成多个文件单独管理。

在store目录下新建 getters.js mutations.js actions.js 来保存公用的方法。同时新建一个modules文件夹，来按模块保存独立的modules文件。

最后格式如下


//index.js

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

import getters from './getters'
import mutations from './mutations'
import actions from './actions'
import moduleA from './modules/moduleA'
import moduleB from './modules/moduleB'

Vue.use(Vuex)


const state={
  name:'张三'
}


export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules: {
    a:moduleA,
    b:moduleB
  }
})
//actions.js

export default{
  achangename (context){
    //模拟异步
    setTimeout(() => {
      //异步完毕之后,调用同步方法
      context.commit('changename2','张飞');
    }, 2000);
  },
  achangename2 (context,name){
    setTimeout(() => {
      context.commit('changename2',name);
    }, 2000);
  },
  achangename3 (context,obj){
    setTimeout(() => {
      context.commit('changename2',obj.name);
    }, 2000);
  }
}
//getters.js

export default{
  getname:(state)=>{
    return state.name+'OK';
  }
}
//mutations.js

export default{
  changename (state){
    state.name="李四"
  },
  changename2 (state,name){
    state.name=name
  },
  changename3 (state,obj){
    state.name=obj.name
  },
  changename4 (state,obj){
    state.name=obj.name
  }
}
//modules/moduleA.js

export default{
  state: {
    name:'我是moduleA'
  },
  mutations: {},
  actions: {},
  getters: {
    getnameA:(state,getters,rootState)=>{
      return state.name+'OK'+rootState.name;
    }
  }
}
//modules/moduleB.js

export default{
  state: {
    name:'我是moduleB'
  },
  mutations: {},
  actions: {},
  getters: {}
}

最后运行的结果和单文件一样




代码下载

下载地址：  密码：3ihc


转载请注明出处：http://gl.paea.cn/n.php?n=209
 
如您看得高兴，欢迎随意投喂，让我们坚持创作！
赞赏一个鸡腿
«上一篇《和小米一起学Vue.js》— Promise
下一篇»《和小米一起学Vue.js》— axios
还没有人留下遗迹
关于 · 作者
最热 · 文章
友情 · 链接
综合 · 搜索
PAEA二维码
“PAEA”是孤狼在其开发的BRIWINGSCMS系统基础上创建的一个个人博客，建立主旨在于分享个人在生活、学习、工作、日常中积累的点点滴滴。其中自主编写的Cocos2d-x系列教程《和屌丝一起学Cocos2d-x》得到了广大网友的支持。以后还会继续更新自己的作品，希望大家继续支持。
Copyright 本站版权归 孤狼 所有 | 基于 "BRIWING SCMS" 技术构建 | 京ICP备13006812号-1