vuex是什么?怎么用,例子

Posted wulinzi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vuex是什么?怎么用,例子相关的知识,希望对你有一定的参考价值。

 什么是vuex?

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

为什么要用vuex?

  • 对于父子组件之前的通信,父组件通过porps传递到子组件,子组件通过$emit发送事件到父组件;父组件还可以通过ref的方式拿子组件的值并共享;

  • 对于组件与组件之间的通信,可以new一个新的Vue实例,专门用来做event bus进行通信。怎么用?

  • 当多个组件之间共享一个状态时,event bus可能就变成乱了

怎么用?

  组件A的js中:  this.$store.dispatch(‘get_beforeVote_params‘,this.dynamicValidateForm.email);            //设值

  组件B的template中:<p>{{‘beforeVoteParams:‘+$store.state.vote.beforeVoteParams}}</p>                   //引用值

  组件B的js中:   如果没有引用这句话:import store from ‘@/store/index‘         就:this.$store.state.vote.beforeVoteParams 直接用;

          如果引用了这句话:import store from ‘@/store/index‘         就:store.state.vote.beforeVoteParams   可以取值;

1)入口文件中要引入同级目录下的:import store from ‘./store‘      //import store from ‘./store‘/index.js   index.js是省略的写法

vue用的版本是:"vue": "^2.3.3",

vuex用的版本是:"vuex": "^2.3.1",

    并且要加入进来:

 

  new Vue({
    router,
    store,
    axios,
    template: ‘<App/>‘,
    components: { App }
  }).$mount(‘#app‘);

 

2)目录如下:

  技术分享图片

3)在index.js中:

import Vue from ‘vue‘;
import Vuex from ‘vuex‘;
import getters from ‘./getters‘;
import user from ‘./modules/user‘;
import permission from ‘./modules/permission‘;
import vote from ‘./modules/vote‘;

Vue.use(Vuex);

const store = new Vuex.Store({
    modules: {
        user,
        permission,
        vote
    },
    getters
});

export default store

 

4)在getter.js中:

我们可以在store中定义getters,第一个参数是state;

传参:定义的Getters会暴露为store.getters对象,也可以接受其他的getters作为第二个参数;

const getters = {
    paramsself:state =>state.vote.beforeVoteParams,
};
export default getters

页面上可以这么用:<p>{{‘paramsself:‘+$store.getters.paramsself}}</p>

5)在vote.js中:

const vote = {
  state: {
    beforeVoteParams : ‘‘,
    index:"queryHoldVolume11115"
  },
  mutations: {
    GET_BEFOREVOTE_PARAMS:(state,item)=>{
      state.beforeVoteParams = item;
    }
  },
  actions: {
    get_beforeVote_params:({commit},item)=>{
      commit(‘GET_BEFOREVOTE_PARAMS‘,item)
    },
  }
};

export default vote;

差不多就是这么用的。

    state,      <!--状态-->
    
    getters,    <!-- 状态的计算属性 -->
    
    mutations,  <!-- 用于改变状态 -->
    
    actions,   <!-- 可包含异步操作的mutation -->

 

3.mapGetters

mapGetters辅助函数仅仅是将store中的getters映射到局部计算属性中,用法和mapState类似

技术分享图片

此图来源别处;







以上是关于vuex是什么?怎么用,例子的主要内容,如果未能解决你的问题,请参考以下文章

vuex 初始化中间件怎么使用

vue项目中,部门列表好几个地方都用上,用vuex怎么管理?

vuex使用,使用场景

Vuex详解

手把手教你学vue-4(vuex)

vuex是什么,以及用vuex的好处,和单界面状态管理