当前位置：首页 > news >正文

关于vuex的理解，用法

news 来源：原创 2024/4/28 6:57:53

1.vuex是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。Vuex背后的基本思想，就是前面所说的单向数据流

2.Vuex状态管理跟使用传统全局变量的不同之处

1）Vuex的状态存储是响应式的：就是当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据
2）**不能直接修改Vuex的状态：**如果是个全局对象变量，要修改很容易，但是在Vuex中不能这样做，想修改就得使用Vuex提供的唯一途径：显示地提交（commint）mutations来实现修改。这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候
Vuex有五个核心概念，
state(状态存储)
getters（相当于vuex的计算属性）
mutations（同步操作）
actions（异步操作）
modules（模块化管理）
3）安装npm install vuex --save

state

state是Vuex中的基本数据
Vuex使用单一状态树，即用一个对象就包含了全部的状态数据。state作为构造器选项，定义了所有我们需要的基本状态参数。

action：

用来解决异步流程来改变state数据。
而matution是直接进行同步操作的，如果你在mutations里进行异步操作，你会发现没用，并不会起任何效果
只有通过action=>mutations=>states

export default new Vuex.Store({
  //存放数据
  state: {
    count: 5, 
  },
  //2.接受dispatch传递过来的方法和参数
  actions: {
    getParamSync (context,val) {
	    //处理异步操作
        setTimeout(()=>{
	        //3.通过commit提交一个名为getParam的mutation
	        //action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation
            context.commit('increment',val)
        },3000)
    }
  }
})

Mutations：

Vuex给我们提供修改仓库 store中的状态的唯一办法就是通过提交mutation

我们在 mutations中定义了一个叫increment的函数，函数体就是我们要进行更改的地方

会接受 state作为第一个参数，第二个是自定义传参

 const store = new Vuex.Store({
    //state存储应用层的状态
    state:{
        count:5  //总数：5
    },
    mutations:{
        increment(state，value){
            state.count += value;
        }
    }
 });

Getters

getters 是store的计算属性，类似于computed,对state里的数据进行一些过滤，改造等等

假设我们要在state.count的基础上派生出一个新的状态newCount出来，就适合使用我们的 getters

getters 接受 state 作为其第一个参数

 const store = new Vuex.Store({
   //state存储应用层的状态
   state:{
      count:5  //总数：5
   },
   getters:{
      newCount:state => state.count * 3
   }
 });
//在组件中获取{{newCount}}方式：
export default {
  computed: {
      newCount(){
          return this.$store.getters.newCount;
      }
  }
};  
//组件中触发action、mutation
 methods:{
     jia(){
         console.log(this.$store)
        this.$store.commit("increment", 1);
     },
     jian(){
         this.$store.commit('decrement',1)
     },
     twojia(){
         this.$store.dispatch('getParamSync',1)
     }
  },

什么是module

背景：在Vue中State使用是单一状态树结构，应该的所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，store对象也将对变得非常大，难于管理。
module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

Vuex的语法糖

mapState辅助函数
mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性，与state类似
mapMutations 辅助函数
与其他辅助函数类似，你可以在组件中使用 this.$store.commit(‘xxx’) 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）

mapActions辅助函数
你在组件中使用 this.$store.dispatch(‘xxx’) 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用