vuex实现状态管理的具体操作

时间:2019-11-12
本文章向大家介绍vuex实现状态管理的具体操作,主要包括vuex实现状态管理的具体操作使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

状态管理是一个经常被提及的名词,具体要怎么实现呢?这次不说废话直接上干货。

1. 引入vuex  
npm install vuex --save
2. 新建一个store文件夹,并在文件夹下新建store.js文件,文件中引入vue和vuex。 
import Vue from 'vue';
import Vuex from 'vuex';
3. 使用我们vuex,引入之后用Vue.use进行引用。
Vue.use(Vuex)
4. 在main.js 中引入新建的vuex文件
import store from './store/store.js'
5. 在实例化 Vue对象时加入 store 对象 (main.js中)
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

6.在vuex下载并引入之后,使用它有几个步骤

  1. 首先要明白一点的就是在我们使用了vuex之后,只要把state放进vuex实例中,就可以在全局任何地方使用这个数据了。但是这肯定是不行的,因为vuex的真正目的是记录用户的操作,如果直接拿里面的数据就失去了意义,因此需要拐个弯去获取它,官方提供的getters,可以用来实时监听vuex里面数据的最新值,记得最后要放进Vuex.Store里去。
const getters = {   //实时监听state值的变化(最新状态)
    isShow(state) {  //方法名随意,主要是来承载变化的showFooter的值
       return state.showFooter
    },
};
  2. 仅仅只做到可以检测是不行的,我们还会操作这里面的数据,vux就比react的redux要简单一些了,官方提供的是mutations,mutattions也是一个对象,这个对象里面可以放改变state的初始值的方法,具体的用法就是给里面的方法传入参数state或额外的参数,然后利用vue的双向数据驱动进行值的改变,同样的定义好之后也把这个mutations扔进Vuex.Store里面
const mutations = {
    show(state) {   //自定义改变state初始值的方法,这里面的参数除了state之外还可以再传变量或对象;
        state.showFooter = true;//实际对state对象的操作
    },
};
  3. 在 Vuex 中,mutations里面的方法都是同步事务,因此需要一个actions去触发这里面的方法,这个actions也是个对象变量,最大的作用就是里面的Action方法 可以包含任意异步操作,这里面的方法是用来异步触发mutations里面的方法,actions里面自定义的函数接收一个context参数和要变化的形参,context与store实例具有相同的方法和属性,所以它可以执行context.commit(' '),然后也不要忘了把它也扔进Vuex.Store里面
const actions = {
    hideFooter(context) {  //自定义触发mutations里函数的方法,context与store 实例具有相同方法和属性
        context.commit('hide');
    },
    getNewNum(context,num){   //同上注释,num为要变化的形参
        context.commit('newNum',num)
     }
};
  4. 在外部组件里进行全局执行actions里面方法的时候,你只需要用执行 ```this.$store.dispatch('action名')```,这样就可以全局改变改变showfooter或changebleNum的值了

原文地址:https://www.cnblogs.com/fdd-111/p/11839855.html