Vuex学习笔记_组件中批量使用mutation-CSDN博客

本文链接：https://blog.csdn.net/weixin_41193564/article/details/107690067

1 Vuex的作用

简单来说Vuex是实现跨组件的全局状态（变量）管理的工具。它和其它使用全局变量方式相比，优势是实现了响应式。以下的场景可以生动说明什么时候需要用到它：

线上商城的购物车，需要在多组件中存取购物车的商品
维护登录状态

2 （引入）单页面状态管理

State可以理解为变量，Action是用户的动作，View是数据在页面的展示，三者循环影响

3 多界面状态管理

全局单例模式

为了在多个视图中共享状态，将需要共享的状态放入Vuex，统一进行访问和修改

修改存放在Vuex中的数据需要遵守如上图的流程，例如Components要修改数据的话，要先Dispatch（分发）给Actions，Commit到mutations（转变）再mutate到State中

Devtools是Vue开发的浏览器插件，Devtools负责记录每一次改变State的操作（便于查错）

Actions在进行异步操作的时候起作用（如图中与BackendAPI交互），如果只进行同步操作可直接把修改从components提交到Mutations

4 实际代码

4.1 准备操作

npm安装：

npm install vuex --save

在Vue-CLI2的基础上，在src下新建store和index.js

写入代码：


import Vue from 'vue'
import Vuex from 'vuex'

//1安装插件
Vue.use(Vuex)

//2.创建对象
const store =new Vuex.Store({
  state:{

  },
  mutations:{

  },
  actions:{

  },
  getters:{

  },
  modules:{

  }
})

export default store;

在main.js中

import Vue from 'vue'
import App from './App'
import router from './router'
//1.引入store
import store from './store'


import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

import 'font-awesome/css/font-awesome.min.css';

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({
  el: '#app',
  router,
//2.注册
  store,
  components: { App },
  template: '<App/>'
})

4.2.1 通过mutations存储和修改变量

Vue官方说明states中的值必须通过mutations来修改（唯一方法）

在index.js中的state添加变量，在mutations中添加对变量进行操作的方法

import Vue from 'vue'
import Vuex from 'vuex'

//1安装插件
Vue.use(Vuex)

//2.创建对象
const store =new Vuex.Store({
  state:{
    count:1000
  },
  mutations:{
    add(state){
      state.count++;
    }
  },
  actions:{
    
  },
  getters:{

  },
  modules:{

  }
})

export default store;

在需要使用count变量的组件中，通过

$store.state.counter

进行调用

通过

this.$store.commit('add')

进行更改

4.2.2 传递参数

还可以向mutations中的函数传递参数，例如

  mutations:{
    add(state){
      state.count++;
    }

    incrementCount(state, count){
        state.counter+=count;
    }
  },

通过

this.$store.commit(' incrementCount', count)

调用

4.2.3 动态地向states添加/删除变量

不能直接在mutations的方法中向states动态添加变量，必须使用如下方法

mutations:{
    //添加变量
    updateInfo(state){
        Vue.set(state.info, 'address', '洛杉矶')
    }
    //删除变量
    deleteInfo(state){
        Vue.delete(state.info, 'age')
    }
}

4.3单一状态树（单一数据源）

指Vue官方建议只创建一个store实例，以免增加管理难度

4.4 getters的使用

getters类似computed属性



import Vue from 'vue'
import Vuex from 'vuex'

//1安装插件
Vue.use(Vuex)

//2.创建对象
const store =new Vuex.Store({
  state:{
    count:1000
  },
  mutations:{
    add(state){
      state.count++;
    }
  },
  actions:{
    
  },
  getters:{
    powerCounter(state){
        return state.counter*state.counter;
    }
  },
  modules:{

  }
})

export default store;

调用：

$store.getters.powerCounter

要在其中传入参数，需要在getters的方法中再加入方法：

  getters:{
    powerCounter(state){
        return state.counter*state.counter;
    }
    moreAgeStu(state){
        return function (age){
            return state.students.filter(s=>s.age>age)
        }
    }
  },

4.5 Action的使用（异步操作）

actions类似mutation，但是action能适应异步操作（不能再mutations内的方法进行异步操作）

actions:{
    updateInfo(context){
        setTimeOut(()=>{  //用timeout模拟异步操作

            //此时调用mutations内的方法进行修改
            context.commit('updateInfo')
        },1000)
    }
}

根据上图，不能跳过mutation在actions中直接修改state，所以必须在actions中的方法调用mutations的方法来修改

在组件中，进行异步操作时，应该调用action的Dispatch（图中有）方法来修改