Vuex是什么，为什么用Vuex，怎么用

最新推荐文章于 2024-03-20 13:43:41 发布

喜欢吃丸子

最新推荐文章于 2024-03-20 13:43:41 发布

阅读量1.1k

点赞数 2

分类专栏： vue.js 文章标签： vue.js visual studio code webpack webstorm javascript

本文链接：https://blog.csdn.net/weixin_43996260/article/details/123906674

版权

vue.js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.Vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储，管理应用中所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

2.为什么要用vuex？

进行统一的状态管理，解决不同组件共享数据的问题。

不同视图需要变更同一状态的问题。

使用vuex之后，状态变化更加清晰。

3.如何使用vuex？

安装引入 npm install vuex --save
注册到vue中import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
实例化vuex的store
const store = new Vuex.Store({
    state: {
        count: 0,
        title:'vuex中的title'
    },
    mutations: {
        increment(state,count) {
            state.count=count
        }
    }
})
挂载在vue实例上
new Vue({
    store
})
在组件中就可以通过this.$store对vuex进行操作
实例化Vuex的store中的方法
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
import {getUserInfo} from "../api/http";
export default new Vuex.Store({
  //全局状态初始值
  state: {

  },
  //数据初加工
  getters:{
  },
  //更改全局状态的方法
  mutations: {
    
  },
  //异步更改
  actions: {

  },
  //模块化
  modules: {
  }
})
1、state

state是什么？是一个单一状态树，是vuex中为一个的数据源，我们的数据都是放在state中的。
组件中去取state的值，通过this.$store.state，
或者可以通过计算属性取得,mapState辅助函数，可以简化操作

import {mapState} from "vuex";

computed: {

    // 可以写一些其他的计算属性

    ...mapState({

      // title: state => state.title

      // title: "title"

      title: state => {

        return state.title;

      }

    })

}

2、getters

对state中的数据进行加工（派生）
取getters中的值,通过this.$store.getters，
或者通过计算属性取，getters也有辅助函数mapGetters，用法和mapState一致。
  import { mapGetters} from "vuex";
computed: {
    // 可以写一些其他的计算属性
    ... mapGetters ({
      title: "title"
    })
}

3、mutation

修改state中的值，我们state每次变化，都应该由mutation去修改，方便追踪数据的流转。
定义mutation

const store = new Vuex.Store({

        // ....

    mutations: {

        increment(state, count) {

            state.count = count

        },

        [CHANGE_TITLE](state, payload) {

            state.title = payload.title;

            // 不能这么写的

            state.obj = {

                ...state.obj,

                title:payload.title

            }

        }

    }

})

调用mutation
this.$store.commit('mutation类型（函数名）',"参数，参数一般是对象形式")
this.$store.commit({type:'mutation类型（函数名）'},...其他参数)

注意事项

要遵循vue相应式变化的规则，简单说就是对于对象的赋值，要用新对象替换老对象。
mutation的type或者说是函数名可以用常量维护。
mutation函数必须是同步的。

4、action

action类似于mutation，不同的是
action可以包含异步操作
action不能直接修改state，如果想修改state的话，需要触发mutation

怎么定义？

actions: {

    // 通过context（上下文环境）可以触发mutation，触发action，获取state、getter等操作

        // 第二个参数就是我们传递过来的参数

        changeTitle(context,payload) {

            setTimeout(() => {

                context.commit(CHANGE_TITLE, payload)

            }, 1000);

        }

    }

怎么触发action
this.$store.dispatch('action名字','参数')
this.$store.dispatch({type:'action类型（函数名）'},...其他参数)

5、module

由于使用单一的状态树，项目中的状态会集中在一起，导致难以维护，这个时候可以通过module对store进行拆分。
使用module之后，每个模块都有自己的state、mutation等内容，方便维护
如何定义

const moduleA = {

state: { ... },

mutations: { ... },

actions: { ... },

getters: { ... }

}

const moduleB = {

state: { ... },

mutations: { ... },

actions: { ... }

}

const store = new Vuex.Store({

modules: {

    a: moduleA,

    b: moduleB

}

})