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

时间：2019-11-12 11:18:32 阅读：78 评论：0 收藏：0 [点我收藏+]

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

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的值了

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

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

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)