vuex的使用

Posted homehtml

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vuex的使用相关的知识,希望对你有一定的参考价值。

vuex是配合vue一块儿使用的一个状态管理工具。
我通常使用它来保存一些全局的数据,例如用户登录信息,用户身份信息,总之一些在很多页面都会使用到的信息,都保存在vuex里面,用的时候就不需要再去请求接口了,直接去vuex里面拿就可以了。
先放官网地址

安装

npm install vuex --save

配置

我实在vue-cli环境中使用vuex的,所以这里就以这个环境作为项目文件结构来写配置了。
先在src/assets文件夹中新建一个vuex/store.js文件,建好之后在文件中写如下代码:

import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        name: ‘xiaoming‘,
        count: 1
    }
})
export default store

在main.js中引入store.js:

import store from ‘@/assets/vuex/store‘;

在全局构造器中注册一下:(这里千万别忘了)

new Vue({
  el: ‘#app‘,
  router,
  components: { App },
  template: ‘<App/>‘,
  store: store   //在根实例下面注册store,相当于全局注册,可以全局调用
})

//题外话
//在vue-cli中,引入某些特定后缀的文件是不需要写全后缀的,就像上面这个store
//因为在config/webpack.base.conf.js文件中,有这样一段代码:
    resolve: {
        extensions: [‘.js‘, ‘.vue‘, ‘.json‘],  //这些后缀的文件可以不写,可以自己随意添加
        alias: {   //模块别名定义,方便后续直接引用别名,无须多写长长的地址
          ‘vue$‘: ‘vue/dist/vue.esm.js‘,
          ‘@‘: resolve(‘src‘),  //从src文件夹开始寻找文件
        }
    }

到这里,vuex已经在你的项目中安装好并且可以使用了。你只需要在vue的html的部分写上如下代码:

<div>{{$store.state.name}}</div>       //页面中会显示‘xiaoming‘

或者在构造器里面写:

console.log(this.$store.state.name);      //打印‘xiaoming‘

html代码书写取值的时候可以不加this,script代码中必须加this。

使用

1.state状态对象的访问(我把state理解成vue构造器中的data)

state里面存放一些数据,例如用户姓名、性别、身份证号等等。之前我的访问方式是:

 {{$store.state.name}}    

但是上面这种写法太长了,而且看起来不直观,查阅过文档之后我发现,访问state对象可以有以下三种写法:

//如果我想在页面中只写{{name}},可以这样写:

 1. computed: {
        name() {
            return this.$store.state.name;
        }
    }
    
 2. import {mapState} from ‘vuex‘;
    computed: mapState({
        name: state => state.name    //es6箭头函数
    })
 
 3. import {mapState} from ‘vuex‘;
    computed: mapState([‘name‘]);    //这种写法最简单,推荐

2.访问mutations方法(我把mutations理解成vue构造器中的methods)

先在store.js中写上如下代码:

const store = new Vuex.Store({
    state: {
        name: ‘xiaoming‘,
        count: 1
    },
    mutations: {
        add(state,num) {   //接收一个外部参数
            state.count += num;
        },
        reduce(state) {
            state.count --;
        }
    }
})

原先我调用add和reduce方法的时候,写法是:

<div>{{count}}</div>
<button @click="$store.commit(‘add‘,10)">点击加十</button>
<button @click="$store.commit(‘reduce‘)">点击减一</button>

但是这种调用方法的写法也太长,需要写上$store.commit这种东西,太啰嗦。
模仿访问state的方法,它也有另外一种便捷的写法:

import {mapState,mapMutations} from ‘vuex‘;
methods: mapMutations([‘add‘,‘reduce‘]),
//需要注意的是,state写在computed里面,而mutations写在methods里面,因为它是在@click之后的方法

现在你可以这样调用它:

<div>{{count}}</div>
<button @click="$store.commit(‘add‘,10)">点击加十</button>
<button @click="reduce">点击减一</button>

3.访问getters(我把getters理解成vue构造器中的computed)

getters就像一道门,每操作一次数据,都会经过一次它。

现在,在store.js中加入getters代码:

const store = new Vuex.Store({
    state: {
        name: ‘xiaoming‘,
        count: 1
    },
    mutations: {
        add(state,num) {   //接收一个外部参数
            state.count += num;
        },
        reduce(state) {
            state.count --;
        }
    },
    getters: {
        add100(state) {
            return state.conut += 100;   //每操作一次count,它都会加上100
        },
        changename(state) {
            return state.name + ‘c‘;     //每操作一次name,它都会拼接上一个c    
        }
    }
})

怎么调用它呢?模仿state的调用方法。
因为它们都是对数据进行操作,不涉及方法,所以getters也写在computed中。

import {mapState,mapMutations,mapGetters} from ‘vuex‘;

//现在来看computed的代码要怎么写
//在写state的时候,我们把computed中的代码写成了这样:
//computed: mapState([‘name‘]);
//那如果现在再加入mapGetters,就需要改变computed的样子,具体应该这样写:

computed: {
    ...mapState([‘name‘,‘count‘]),   //es6扩展运算符,用map必须得用这个,否则会报错
    ...mapGetters([‘add100‘,‘changename‘]),
    count2: function() {
        return this.$store.state.count;
    }
}

此时,每当你操作一次button按钮,无论是加法还是减法,它都会对count进行+100的操作。当然,此时的name是不会改变的,即使你引入了changename方法,但因为没有改变过name,所以就不会出发changename方法。

4.访问actions

actions与getters的用法相似,但是它是异步调用,写在methods里面。(说实话我是没看懂这个actions有啥用)

先来完善一下我们的store.js中的代码:

const store = new Vuex.Store({
    state: {
        name: ‘xiaoming‘,
        count: 1
    },
    mutations: {
        add(state,num) {   //接收一个外部参数
            state.count += num;
        },
        reduce(state) {
            state.count --;
        }
    },
    getters: {
        add100(state) {
            return state.conut += 100;   //每操作一次count,它都会加上100
        },
        changename(state) {
            return state.name + ‘c‘;     //每操作一次name,它都会拼接上一个c    
        }
    },
    actions: {
        add1(context) {                    //参数context即全局上下文对象,store
            context.commit(‘add‘,10);      //通过context调用add方法
            setTimeout(()=>{context.commit(‘reduce‘)},3000)
        },
        reduce1({commit}) {                //{commit}是另一种传参方式,一个封装好的commit
            commit(‘reduce‘);
        }
    }
})

写好actions方法了之后,就来调用它,调用方法跟mutations差不多:

methods: {
    ...mapMutations([‘add‘,‘reduce‘]),
    ...mapActions([‘add1‘,‘reduce1‘]),
    aa(i) {
        console.log(i)
    }
}

在html代码中使用:

<button @click="add1">做加法</button>
<button @click="reduce1">做减法</button>

reduce1方法调用了mutations中的reduce方法,每次点击减1;
add1调用了mutations中的add方法,每次点击加10,同时在3秒钟之后,会调用一次减法,减去1;
因为还有getters的设置,所以每次操作的时候还会再加100。

以上就是vuex的大致用法了,我平时只有state用的比较多。
我对vuex的理解很浅,如有不对的地方,请指正。

以上是关于vuex的使用的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段13——Vue的状态大管家

项目集成 vue-router 和 vuex

Vue 教程(四十九)Vuex 核心概念和项目结构

Vue 教程(四十九)Vuex 核心概念和项目结构

Vue 教程(四十九)Vuex 核心概念和项目结构

Vue 教程(四十九)Vuex 核心概念和项目结构