vuex是vue提供的一个集中式状态管理器，用于对数据的集中式管理。
vuex有四个重要的属性：state、mutations、actions、getters
1.vuex的使用
安装
建一个文件夹（store），新建一个index文件，文件内创建状态管理器store
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
getters: {},
modules: {}
});在main.js文件注册vuex
import Vue from 'vue';
import App from './App.vue';
import store from './store/index';
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
store
}).$mount('#app');现在就可以使用vuex对状态进行管理了
2.vuex的四大属性
i.state
state是vuex所管理的数据存放的地方。例如我们需要集中管理的用户信息等。
state: {
user: '',
age: 0,
level: '0'
},vuex规定不可以直接通过state直接来修改状态的值，而是通过mutations来修改（不推荐在actions内修改）
ii.mutations
mutations适用于改变vuex所管理状态，是一个纯函数，不能写异步代码
mutations: {
setUserMassage(state, data) {
state.user = data.user;
state.age = data.age;
state.level = data.level;
}
},自定义方法可以接收两个参数，state是状态管理属性state的实例，data表示的是该方法的参数，多个需要把参数变成一个对象。
纯函数：函数的放回结果只依赖他的参数,例如
function fn(a){
return a+1
}上面的函数就是一个纯函数。例如下面的函数就不是一个纯函数
var b=2
function fn(a){
return a+b
}因为该函数的返回值依赖外部变量b，所以它不是一个纯函数。
在vue文件中触发mutations
this.$store.commit(methodsName,...params)iii.actions
actions可以把它比作一个触发器，用于触发mutations中的方法，从而改变传统
actions: {
getUserInfo({ commit },data) {
axios
.get('https://www.fastmock.site/mock/1144b5db9e5a837f7e4b2c775e8b1172/mock/text')
.then(response => {
console.log(response.data); // 得到返回结果数据
commit('setUserMassage', response.data.data);
})
.catch(error => {
console.log(error.message);
});
}自定义方法接收两个参数，一个是对象：{commit}(固定写法)，另一个是该方法的参数，可省略。
其中{commit}对象提供了commit方法用于mutations内的方法：commit方法有两个参数
在vue文件中触发actions
Ⅳ.getter
getters相当于vue中的computed，
getters: {
levelUp(state, data) {
return state.level + 123;
}
},有两个参数，用于和上面mutations的方法参数一样。
3，使用vuex
vuex提供了$store实例获取vuex的四大属性。
在视图上
在vue实例上
需要添加“this.”获取
例如
this.$store.getters
i.简化获取
为了方便获取，vuex提供了一组映射关系用于简化获取vuex四大属性
mapState和mapGetters需要在computed配置选项使用。
mapMutations和mapActions需要在methods配置选项使用。
<template>
<div>
<h1>主页页面</h1>
<div>{{ user }}+{{ age }}+{{ level }}</div>
</div>
</template>
<script>
import { mapActions, mapState } from 'vuex';
export default {
name: 'App',
data() {
return {};
},
computed: {
...mapState(['user', 'age', 'level'])
},
methods: {
...mapActions(['getUserInfo'])
},
mounted() {
this.getUserInfo();
}
};
</script>
<style lang="less" scoped></style>4.vuex模块化
vuex可以 单独拆分成多个模块，每个模块的vuex可以管理不同类型的状态，拿商品信息作为例子
项目结构
在index.js中定义开启命名空间
namespaced: true,import state from './state';
import actions from './actions';
import mutations from './mutations';
export default {
namespaced: true,
state,
mutations,
actions
};在外部index,js中使用modules
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
import product from './product/index';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
product:product
//product //可以写成这样
}
});在vue文件中使用的时候需要带上路径
或者
...mapActions({
getProductInfo: 'product/getProductInfo'
})
或者
...mapActions('product/getProductInfo',['getProductInfo'])如果不使用命名空间进行代码隔离
mutations和actions用于的用法
即：
import state from './state';
import actions from './actions';
import mutations from './mutations';
export default {
//namespaced: true,
state,
mutations,
actions
};获取方式可以不用带路径
注意：使用命名空间或者不使用命名空间两种获取方式不能混用。
获取state
this.$store.state.product.productName或者
...mapState({
productName: state => state.product.productName
}),获取getters
this.$store.getters["product/getProductName"]或者
...mapGetters("product", ["getProductName"])actions.mutations和getters格式
...mapXxx("模块名",[
'方法名'
]),只有state不同，第二个参数是一个对象
...mapState('some/module', {
a: state => state.a,
b: state => state.b
})
