开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天

为什么会有vuex?

vue中有父子组件，兄弟组件之间传值的方法，假设多个组件多层嵌套，而且各个组件共享一个数据。比如常见的登录token,登陆成功后拿到token,其他页面判断token是否存在，或者登出时候清除token。vuex就是一个容器，里面放着大家共享的数据。

怎么用？

实例化

vuex相当于一个构造函数，new一个实例，作为vue实例对象上的一个属性，所以后续通过this.$store.xxx获取值。项目中this指向vue实例。

屏幕截图aaa 2023-02-07 223908.png

store/index.js

import Vue from 'vue'; 
import Vuex from 'vuex'; Vue.use(Vuex); 
const store = new Vuex.Store({ 
state: { 
// 定义一个name，以供全局使用 
name: '张三', 
// 定义一个number，以供全局使用 
number: 0, 
// 定义一个list，以供全局使用 
list: [ { id: 1, name: '111' }, { id: 2, name: '222' }, { id: 3, name: '333' }, ], }, 
}); 
export default store;

main.js

import store from './store'; // 引入前面导出的store对象 
new Vue({ 
el: '#app', 
store, // 把store对象添加到vue实例上 
components: { App }, template: '<App/>', });

这时候在组件内可以通过this.$store.xxx访问store实例中的数据

getter属性获取值

比如每个页面都展示name,统一修改name时候用getter属性，每个属性值是一个函数，函数返回值从store.state中获取

getters: { 
getMessage(state) { 
// 获取修饰后的name，第一个参数state为必要参数，必须写在形参上 
return `hello${state.name}`; }, 
},

这时候这样调用this.$store.getter.getMessage,调用getter中的函数

Mutation属性同步修改值

mutation:{ 函数名(state){ 修改state值 } }动态传参

mutations: { 
// 增加nutations属性 
setNumber(state，obj) { 
// 增加一个mutations的方法，方法的作用是让num从0变成5，state是必须默认参数 state.number = obj.number; }, },

这时候这样调用 this.$store.commit('setNumber'，{number:666});动态传参,这里动态传参官方建议传对象形式。

Action属性异步修改值

mutation只能同步修改，异步修改需要通过action，然后commit到mutation中

mutations: { 
setNumberIsWhat(state, payload) { 
state.number = payload.number; }, 
}, 

actions: { // 增加actions属性 
//第一个参数是store对象，第二个参数接受值
setNum({解构出store中的方法，一般是commit}，obj) 
{ // 增加setNum方法，默认第一个参数是content，其值是复制的一份
store return new Promise(resolve => { // 我们模拟一个异步操作，1秒后修改number为888 setTimeout(() => { content.commit('setNumberIsWhat', { number: 888 }); resolve(); }, 1000); }); }, 
},

这时候这样调用

this.$store.dispatch('action中的方法名'，{ number: 611 })

关系总结

至此可以看出一个store对象中主要有：state,getters,actions,mutations属性，它们之间关系如下：

组件中：this.$.dispatch("Actions中的方法fn"，obj)

Actions中： fn({commit},data){commit('Mutations中的方法fn1',data)} 支持异步

Mutations中： fn1(state，data){state.xxx = data.xxx} 同步修改state值

最终state中值动态渲染到不同页面

封装代码

根据功能拆分每个模块，各自维护state,mutations,actions

建立moudles/user.js

const user = {
state:{},
mutations:{},
actions:{},
}
export default user

getters.js文件

export default {
name: ()=>state.xxx.id
}

index文件

import Vue from 'vue'; 
import Vuex from 'vuex'; Vue.use(Vuex); 
const store = new Vuex.Store({ 
moudles:{
users
},
getters
export default store;

同一个页面获取多个属性值

import { mapState, mapGetters, mapActions, mapMutations } from 'vuex';

直接用...mapActions(['setNum']),

取别名用对象形式...mapActions({ setNumAlias: 'setNum' }),

调用this.setNum(obj)

其他属性使用方法类型

vue 总结(一) -Vuex3