Venx使用指南(精简版)

Venx是什么?

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

什么情况下我应该使用 Vuex？

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的

一.安装Venx(代码:npm i vuex --save-dev).

安装vueX.PNG

二.在项目中找到src文件夹创建store文件夹以及文件index.js即可.

创建文件夹

三.配置index文件.

我们的核心思想是要理解Vuex是是什么东西,用来做什么.
现在我们要把它(Vuex)看做是一个特殊的对象,是用来存放和提取的,所以要理解Vuex的关键是懂得存和取的思想.
下面进行配置:
(1).首先引进vue 和 vuex 并使用.

    import Vue from 'vue';
    import Vuex from 'vuex';
    Vue.use(Vuex);

(2).声明一个变量存放vuex的基本配置
在这个对象里面要有两个特别关键的配置.
一个是存(state),一个是取state(mutations).

(3).最后再将其导出export default new Vuex.Store(options)

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);


// vuex的一个配置项
const options = {
   // state是用来存放数据的
   state: {
       // 显示底部
       showFooter: true,
       isLogin: false
   },
   // mutation用来修改state里面的属性值
   mutations: {

       SHOWFOOTER(state, payload) {
           state.showFooter = payload;

       },
       // 改变登录状态
       ISLOGIN(state, payload) {

           state.isLogin = payload;
       }
   }
}

export default new Vuex.Store(options)

四.到main.js中调用Vuex.使用到全局.

(现在可以用了!)

  import store from './store';
  new Vue({
      store
  })

$例子:

实例:需求APP底部有的页面需要底部有的页面不显示底部,在此我们使用Vuex 完成.
首先在state(储存)里设置 showFooter:false,默认不显示;

// 配置Vuex
const options = {
    // state是用来存放数据的
    state: {
        // 显示底部
        showFooter: false,
    
    },

2.为提取(getters)在getters里面设置一个函数并且将上面的state传入 ,返回里面的值showFooter,

 getters: {
        showFooter: state => state.showFooter,

    },

3.设置 mutation用来修改state里面的属性值

 mutations: {

        SHOWFOOTER(state, payload) {
            
            state.showFooter = payload;

        },
       
    }

4.接下来我们要引进路由守卫的概念,简单介绍一下:
路由守卫是指当用户满足了某些要求之后才可以离开或者进入某个页面或者场景的时候使用。 比如说只有当用户填写了用户名和密码之后才可以进入首页，比如说用户离开某个页面时明月保存信息提示用户是否保存信息后再离开等操作，控制这些要求的就叫路由守卫。
此时我们来到router.index页面配置路由守卫结合Vuex完成我们的需求.

router.beforeEach((to, from, next) => {
    if (to.meta.showFooter) {
        store.commit('SHOWFOOTER', true);
    } else {
        store.commit('SHOWFOOTER', false);
    }
    next();
})

然后在路由配置中添加showFooter: true(因为要显示的多,不显示的少,所以,这里写显示,不想显示底部的页面只需要不写这句即可).

5.接下来到App.vue页面里修改底部footer标签
添加v-if="$store.state.showFooter"

<footer v-if="$store.state.showFooter">
      <div class="flex-sa fixed h50 bg-fff w100pc" style="bottom:0;">
        <div>