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)当中进行使用
导入全局
