vuex是什么以及如何使用

tlg.

已于 2023-03-02 20:25:05 修改

阅读量120

点赞数

文章标签：前端 javascript vue.js

于 2023-02-28 18:14:51 首次发布

本文链接：https://blog.csdn.net/qq_45629121/article/details/129148772

版权

Vuex是一个专为Vue.js应用程序开发的状态管理模式，它集中管理组件间的共享数据，提供响应式状态和高效的组件间通信。通过state存储数据，mutations安全修改状态，actions处理异步操作，getters缓存计算属性，以及模块化管理复杂应用，Vuex帮助开发者提高开发效率和代码可维护性。

摘要由CSDN通过智能技术生成

vuex统一管理的好处

1.能够在vuex中集中管理共享的数据，易于开发和后期维护

2.能够高效的实现组件之间的数据共享，提高开发效率

3.存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步

什么样的数据适合存储在vuex中

一般情况下，只有组件之间共享的数据，才有必要存储在vuex中；对于组件中的私有数据，依旧存储在组件自身的data中即可。

vuex使用

1.安装

 npm install vuex --save

2.main.js导入vuex

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

3.store(仓库)、

每一个vuex应用的核心就是store（仓库）

1.vuex的状态存储是响应式的

2.不能直接改变store中的状态，使用vuex中提供的方法

4.创建仓库

1.引入vuex Vue.use(Vuex)

2.const store = new Vuex.Store({

//创建仓库

state:{

}

})

3.挂载vue实例

new Vue({

el: '#app',

router,

store, //挂载vuex实例

render: h => h(App)

})

state

1.获取state数据

示例：

const store = new Vuex.Store({
                    //创建仓库
                    state:{
                        user:'admin',
                        count:10
                    }
                })

1.方法1：直接获取

 $store.state.user

2.方法2：计算属性获取（了解）

const Counter = {
               template: `<div>{{ count }}</div>`,
               computed: {
                   count () {
                        return this.$store.state.count
                            }
                         }
                 }

3.mapState辅助函数

import {mapState} from 'vuex'
       computed:{
           ...mapState(['参数1','参数2',...]) //数组里面直接写state中的变量名
            // 使用对象展开运算符将此对象混入到外部对象中
           ...mapState({
                myUser:user//从新命名
                        // ...
            })
            }

mutations

1.作用：更改Vuex的state中的状态的唯一方法是提交mutation

2.说明：修改state数据的唯一方法

3.语法

  const store = new Vuex.Store({
                    //创建仓库--存储数据
                    state:{
                        user:'admin',
                        count:10,
                        userInfo:{
                            name:'看看',
                            age:18,
                            //desc:""
                        }
                    },
                    //修改state的函数事件
                    mutations:{
                        changeCount(state,payload){
                            state.count += payload;
                        },
                        changeUser(state,{user}){//对象：{user:""}
                            state.user = user
                        },
                        changeUserInfo(state,payload){
                            //添加一个属性
                            方法一：Vue.set(state.userInfo,'desc',payload.desc)
                            方法二：state.userInfo={...state.userInfo,...{desc:payload:desc}}
                            方法三: Object.assgin()
                        }
                    }
                })

1.直接使用

 this.$store.commit('changeUser',100)

2.mapMutations赋值函数

    methods:{
          ...mapMutations(['changeUser','changeCount']),
           change(){
                this.changeUser({
                                user:"李四"
                            })
                   }
           }

4.使用常量替代 Mutation 事件类型

export const SOME_MUTATION = 'SOME_MUTATION'


 // store.js
import { createStore } from 'vuex'
import { SOME_MUTATION } from './mutation-types'
const store = createStore({
              state: { ... },
              mutations: {
                  // 我们可以使用 ES2015 风格的计算属性命名功能
                  // 来使用一个常量作为函数名
                  [SOME_MUTATION] (state) {
                  // 修改 state
                               }
                    }
               })

5.Mutation需要遵守vue的响应规则

1.最好提前在store中初始化好所有的属性

2.当需要在对象上添加属性时，

vue.set(obj(对象),'newProp'(属性),123(值)) Vue.set(state.userinfo,'desc',)

actions

1.作用

Action 提交的是 mutation，而不是直接变更状态。

Action 可以包含任意异步操作。

2.语法

   const store = new Vuex.Store({
                    //创建仓库--存储数据
                    state:{
                        user:'admin',
                        count:10,
                        userInfo:{
                            name:'看看',
                            age:18,
                            //desc:""
                        }
                    },
                    //修改state的函数事件
                    mutations:{
                        changeCount(state,payload){
                            state.count += payload;
                        },
                        changeUser(state,{user}){//对象：{user:""}
                            state.user = user
                        },
                        changeUserInfo(state,payload){
                            //添加一个属性
                            方法一：Vue.set(state.userInfo,'desc',payload.desc)
                            方法二：state.userInfo={...state.userInfo,...{desc:payload:desc}}
                            方法三: Object.assgin()
                        }
                    },
                    //操作mutations异步请求
                     actions: {
                        changeActionUser (context) { //content对象={state,commit,getters}
                            context.commit('changeUser',{
                                user:'sdf'
                            })
                        }
                })

3.操作actions

1.直接操作

 $store.dispatch('action函数名',payload)

2.mapActions辅助函数

methods:{
       ...mapActions(['changeActionUser','getBanner']),
       bannerDate(){
           this.changeActionUser();
                }
         }

Getters

1.作用：是store的计算竖向缓存state数据

2.语法

//计算属性  缓存state数据
getters:{
      money:function(state){
             return state.count+2
           }
}

3.获取getters

1.直接获取

 $store.getters.money

2.mapGetters辅助函数

  computed:{
        ...mapGetters(['money'])
        }

总结：state、getters 在computed中读取

mutations、actions在methods中读取

module

1.作用：Vuex允许我们将store分割成模块（module）。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套模块

2.语法

  const centerModule = {
                namespaced:true,//模块内部的action、mutation、和getter 是注册在局部模块空间的
                state: {
                    centerUser:{
                        centerName:'张珊',
                        level:'1'
                    },
                    num:10
                },
                mutations: {
                    setUser(state,payload){
                        state.centerUser.centerName = payload
                    }
                 },
                actions: {
                    setActionUser({commit},payload){
                        commit('setUser',payload)
                    }
                 },
                getters: {
                    myNum(state){
                        return state.num
                    }
                 }
                }

            const moduleB = {
            state: () => ({ ... }),
            mutations: { ... },
            actions: { ... }
            }

            const store = createStore({
            modules: {
                a: centerModule ,
                b: moduleB
            }
            })



            store.state.a // -> centerModule 的状态
            store.state.b // -> moduleB 的状态

获取模块数据

1.state数据

  1.直接获取  $store.state.模块名字.变量

  2.computed:{
      //获取模块数据：mapState('模块名字',['变量1',...])
       ...mapState('centerModule',['num','centerUser'])
    }

2.getters数据

  1.$store.getters["centerModule/myNum"]

  2.computed:{
       ...mapGetters('centerModule',['myNum'])
   }

3.mutations/actions

 1.this.$store/commit("centerModule/setUser","修改User1")

 2.methods:{
       ...mapMutations("centerModule",['serUser'])
       ...mapActions("centerModule",["setActionUser"])
        changeUser(){
              this.$store.commit("centerModule/setUser",修改user1)
           }
         changeUser1(){
               this.setUser("修改")
            }
          changeUser2(){
                this.$store.dispatch("centerModule/setUser",111)
            }
           changeUser(){
                 this.setActionUser("1111")
             }
     }