Vue状态管理工具Vuex

vuex概述

• 集中式状态管理： Vuex 通过一个全局的 store 来管理应用的所有组件的状态，使得状态的变化可预测和追踪。
• 状态共享： 允许不同组件之间共享同一状态，避免了通过 props 和事件来传递数据的繁琐操作。
• 状态的响应式更新： 当状态发生变化时，组件会自动更新视图，无需手动操作。

vuex使用

安装vuex依赖：

npm install vuex --save

基本结构（当然不是固定结构，只是一种好的规范）：

介绍一下每个文件的作用：

下面看下index.js文件：

这里将store暴露出来供vue注册全局使用

在vue项目main.js中全局注册使用store：

import store from "./store";

new Vue({
  store,
  render: h => h(App)
}).$mount("#app");

讲讲store文件夹中各个文件作用：

我这里没有创建单独的state.js，我在index.js创建store实例的时候直接传入了state对象，如果state多了的话也可以分开写在state.js里面

然后其他js文件的话对应的都是我创建Vuex.Store实例需要的参数，我也是分开写在了各自的js里

mutations.js：存放改变state的非异步方法

//这里假设我的state中有一个属性是name
export default {
    setName(state,newName){
        state.name = newName;
    },
    ...其他方法
}

getters.js：通俗一点就是获取state的时候对state加工一下返回

//例如state中有一个list:[1,2,4,6,8]
export default {
    getList(state){
        return state.list.filter(item=>item>5)
    }
}

actions.js:异步改变state的值,

actions中的函数的第一个参数是当前store上下文context

actions 中的函数第一个参数 context 包含以下属性和方法：

1. context.state: 当前的 state 对象，等同于 store.state，可以通过 context.state 来访问或修改 state 中的数据。

2. context.getters: 等同于 store.getters，可以通过 context.getters 来访问 store 中定义的 getters。

3. context.commit: 提交一个 mutation，用法为 context.commit('mutationName', payload)，这允许 actions 中提交 mutations 来修改 state。

4. context.dispatch: 分发另一个 action，用法为 context.dispatch('actionName', payload)，可以在 action 中触发其他 action。

5. context.rootState: 如果有多个 module（模块化的 store），可以通过 context.rootState 访问根节点的 state。

6. context.rootGetters: 如果有多个 module，可以通过 context.rootGetters 访问根节点的 getters。

常见的用法就是在actions中书写异步函数获取上下文中的commit方法来提交一个mutations方法以此达到异步修改state的操作

例如，一个登录操作：写在actions.js中

最后的话就是modules文件夹了，这里面其实就是相当于一个个小的store了，可以利于将巨大的仓库拆成一个个小房间

使用的时候也就是层级深一点

结构：在punishCase中存放了person属性

modules中的文件还能够细分

看一下modules/user/index.js中内容

import state from  './state.js'
import getters from  './getters.js'
import actions from  './actions.js'
import mutations from  './mutations.js' 
export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
};

//namespaced 是一个布尔值选项，它用于确定模块内的 actions、mutations 和 getters 是否应该被加上模块名称的前缀


使用user中的state就需要this.$store.user.XXX
使用mutations中的方法就是this.$store.commit('user/changeLike', 参数)同理actions也是如此
actions的使用方法是this.$store.dispatch