【配置】Vuex安装与配置总结

1. 3种安装方式

vuex文档https://vuex.vuejs.org/zh/installation.html

npm install vuex --save
yarn add vuex
[\color{red}{推荐}]vuecli3.0进入\color{red}{vue ui}里安装vuex依赖

2. 配置

一般会在src下新建一个为\color{red}{store}的文件夹进行存放vuex配置【图1】
图1
2.1 导入相关依赖,并且进行使用
import Vue from 'vue';
import Vuex from 'vuex'
//使用
Vue.use(Vuex)

2.2 导出new Vuex.Store()

创建一个对象再进行导出
const options = {}
export default new Vuex.Store(options)

简写

export default new Vuex.Store({})
进行配置

\color{blue}{属性}

vuex.jpeg

【1】\color{green}{state}(用来存放数据)
【2】\color{green}{mutations}(用来修改state的值)

\color{red}{实例用法:}
直接通过mutation来修改state下的isLogin (利用commit触发)
//执行后此时state里isLogin的值为true
//commit触发mutation里ISLOGIN这个函数并且,将数据true传入
this.$store.commit("ISLOGIN", true);

提交载荷(Payload)

\color{orange}{在大多数情况下,载荷应该是一个对象,这样可以包含多个字段并且记录的 mutation 会更易读}

mutations: {
increment (state, payload) {
  state.count += payload.amount
}
store.commit('increment', {
  amount: 10
})

【3】\color{green}{getters}(用来获取state里的属性值) \color{#EEC900}{or} 在实例里用 this.store.state.属性名 来获取值

\color{red}{实例用法:}
//从vuex 导入mapGetters方法
import { mapGetters } from "vuex";
//计算属性,将属性拿来进行处理,处理后可以直接在html使用可以实现属性值的变化带着处理后的一起变化
  //比较method更加容易实现单数据的处理
  computed: {
    //使用mapGetters导入isLogin
    ...mapGetters(["isLogin"])
  },

【4】\color{green}{actions}(派遣行动,可以跳过此步骤)
解构commit 使用commit触发mutation进行修改

actions: {
    ISLOGINACTION ({ commit }, payload) {
      commit('ISLOGIN', payload)
    }
  },

【5】\color{green}{modules} 拆分store(当你的东西存放太多的时候,可以考虑进行拆分)

例:

在store文件夹下面创建一个module文件夹来存放你所要拆分的文件showFooter


showfooter.PNG

将showFooter的配置写入showFooter.js

export default {
    state: {
        showFooter:true
    },
    mutations: {
        SHOWFOOTER(state, payload) {
            state.showFooter = payload
        }
    },
    getters: {
        showFooter: (state) => state.showFooter
    },
}

再导入回原来的index.js,并使用


show.PNG

我们可以通过vue Devtools看到showFooter


show2.PNG

【6】\color{green}{plugins} 插件
vuex-persistedstate store本地化(持久化插件)

vuex持久化.PNG

\color{red}{实例用法:}

通过dispatch派遣到action进行commit触发修改

this.$store.dispatch("ISLOGINACTION", true);
\color{red}{配置用法:}
import Vue from 'vue';
import Vuex from 'vuex'

Vue.use(Vuex)

const options = {
    //用来存放数据的
    state: {
        isLogin: false
    },
    //用来修改state的属性
    mutations: {
        //获取调用ISLOGIN时传过来的数据payload,将数据进行处理修改state
        ISLOGIN(state, payload) {
            state.isLogin = payload
        }
    },
    //用来获取state里的东西
    getters: {
        isLogin: (state) => state.isLogin
    },
     //this.$store.dispatch("ISLOGINACTION", true);
    //经过action派遣后才到达mutation进行处理 此步骤可以省略
    actions: {
        //触发commit,接受dispatch传来的修改参数
        ISLOGINACTION({ commit }, payload) {
            commit('ISLOGIN', payload);
        }
    }
}

export default new Vuex.Store(options)
最后可以导入全局(main.js)当中进行使用
导入全局
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。