vue2中,Vuex和Store的基本使用(一)——基本概念之state、mutations、actions & getters的使用 & actions和mutations的区别

1、基本概念

vuex可以理解为整个Vue程序中的全局变量。

但他和以前概念中的全局变量又有所不同,他也是响应式的,而且,你不能直接修改vuex中的变量,只能通过显式地commit=>mutation来进行数据的改变。

五大模块

  • state => state里面存放的是变量,如果你要注册全局变量,写这里

  • getters => getters相当于是state的计算属性,如果你需要将变量的值进行计算,然后输出,写这里

  • mutations => 修改store中的变量的方法,如果你要改变变量的值,就写这里

  • actions => actions提交的是mutations,相当于就是改变变量的方法的重写,但是,actions是可以进行异步操作的

  • module => 将整个Vuex模块化,主要的特点就是namespaced,所有的访问都要经过命名空间

1.1、actions和mutations的区别

在Store仓库里,state就是用来存放数据

  • 相同点:

action的功能和mutation是类似的,都是去变更store里的state

  • 不同点:

actions不是直接变更state,而是通过提交给mutations,让mutations去改变state

actions是异步的去commit操作,而mutations是同步的

1、action主要处理的是异步的操作,mutation必须同步执行,而action就不受这样的限制,也就是说action中我们既可以处理同步,也可以处理异步的操作

2、action改变状态,最后是通过提交mutation

2、数据定义

首先在src文件目录下新建store文件夹,在store文件夹中新建module文件夹以及index.js,然后在module中新建自己的功能模块的js文件。

例如我这边新建了一个user.js,专门存放用户相关的全局变量,所以目录如下

├─ src    //主文件
|  ├─ store       //vuex全局变量文件夹
|  |  |- index.js      //store主文件
|  |  └─ module     //store模块文件夹
|  |  |  └─ user.js      //存放user相关的全局变量
|  ├─ main.js 

接下来,在相应的文件夹中写入以下内容

第一步:写store文件

src/store/index.js

//index.js
import Vue from 'vue'
import Vuex from 'vuex'

import user from './modules/user'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    user
  }
})

第二步:写数据文件

src/store/module/user.js

//user.js
const state = ({ //state里面存放的是变量,如果你要注册全局变量,写这里
  username:'',   
});

const getters = { //getters相当于是state的计算属性,如果你需要将变量的值进行计算,然后输出,写这里
  fullName(state){
    return state.username + '用户';
  }}
;

const mutations = { //修改store中的变量的方法,如果你要改变变量的值,就写这里
  SET_username(state, value) {
    state.username = value;
  },
};

const actions = { //actions提交的是mutations,相当于就是改变变量的方法的重写,但是,actions是可以进行异步操作的
  setUsername(content) {
    content.commit('SET_username');
  }
};

export default{
  namespaced:true,
  state,
  getters,
  mutations,
  actions
};

第三步:main.js中进行引入

src/main.js

//main.js
import Vue from 'vue'
import App from './App'
import store from './store/index'

new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
});

在上面的代码中,已经实现了vuex的模块化,定义State,Getter,Mutation,Action等所有基本的功能。

3、页面中的使用
3.1、直接使用
state => this.$store.state.user.username
getter => this.$store.getters.user.fullName 
mutation => this.$store.commit('user/SET_username','cooldream')   // 此时的username值为cooldream
mutation => this.$store.dispatch('user/SET_username')  // action未找到传值的方法
3.2、使用辅助函数
<script>
  import {mapState,mapGetters,mapMutations,mapActions} from 'vuex
    export default {
        name: "Parent",
        computed:{
            ...mapState({
                username:state=>state.user.username   //用this.username即可访问
            }),
            ...mapGetters({
                fullName:'user/fullName'    //用this.fullName可访问
            })
        },
        methods:{
          ...mapMutations({
              setName:'user/SET_username'    //this.setName('cooldream');   即可将值变为cooldream
          }),
          ...mapActions({
              asyncSetName:'user/setUsername'    //this.asyncSetName();   即可调用commit('user/setUsername')
          })
        },
    }
</script>
Logo

前往低代码交流专区

更多推荐