1. 3种安装方式

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

npm install vuex --save

yarn add vuex

[]vuecli3.0进入里安装vuex依赖

2. 配置

一般会在src下新建一个为的文件夹进行存放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({})

进行配置

vuex.jpeg

【1】(用来存放数据)
【2】(用来修改state的值)

直接通过mutation来修改state下的isLogin (利用commit触发)

//执行后此时state里isLogin的值为true
//commit触发mutation里ISLOGIN这个函数并且，将数据true传入
this.$store.commit("ISLOGIN", true);

提交载荷（Payload）

mutations: {
increment (state, payload) {
  state.count += payload.amount
}

store.commit('increment', {
  amount: 10
})

【3】(用来获取state里的属性值) 在实例里用 this.store.state.属性名 来获取值

//从vuex 导入mapGetters方法
import { mapGetters } from "vuex";

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

【4】(派遣行动，可以跳过此步骤)
解构commit 使用commit触发mutation进行修改

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

【5】 拆分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】 插件
vuex-persistedstate store本地化（持久化插件）

vuex持久化.PNG

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

this.$store.dispatch("ISLOGINACTION", true);

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)当中进行使用

导入全局