Vuex笔记

安装Vuex

npm install vuex@3.6.2 -S

创建文件夹：store

在src下面创建一个文件夹（仓库的意思）

在store下创建index.js文件

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

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

// 2 创建对象
const store = new Vuex.Store({})

// 导出
export default store

在main.js中挂载

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    template: '<App/>'
})

State提供唯一的公共数据源，所有共享的数据都有统一放在Store的State中进行存储。

const store = new Vuex.Store({
    // 作用：保存状态，用于共享
    state: {
        count: 0
    },
    mutations: {},
    actions: {},
    getters: {},
    modules: {}
})

访问State中数据的第一种方式：

this.$store.state.属性名称

访问State中数据的第二种方式：

// 1 从vuex中按需导入mapState函数
 

import { mapState } from 'vue'

通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性：

compuated:{
    // 前面需要三个点，为展开运算符，意思是将全局哪些数据映射为当前的一个计算属性
        ...mapState(['count'])
}

获取总结：两个方式都可以获取，根据实际需求来决定采用那种获取的方式

修改store里面的数据

mutation用于变更store中的数据

第一种方法：

1. 只能通过mutation变更store数据，不可以直接操作Store中的数据
2. 使用这个方法虽然有些繁琐，但是可以集中监控所有的数据变化
3. 定义的时候后面需要加一个s

const store = new Vuex.Store({
    // 作用：保存状态，用于共享
    state: {},
    // 作用：用于变更修改store里面的数据
    mutations: {
        add(state){
            //变更状态
            state.count++
        }
    },
})

触发mutation里面的函数，在需要调用的页面中这样写：

methods:{
    btn(){
        // 触发mutations的第一种方法
        this.$store.commit('add');
    }
}

可以触发mutations时传递参数：

const store = new Vuex.Store({
    state: {},
    mutations: {
        addN(state, step) {
            // 变更状态
            state.count += step
        }
    }
})

触发mutation

methods:{
        btn2(){
            // 触发时传递参数
            this.$store.commit('addN',10)
        }
    }

第二种方法：

从vuex中按需导入mapMutations函数

import {mapMutations} from 'vuex';

    methods:{
        ...mapMutations(['sub','subN']),
        btn1(){
            // 直接通过this进行调用
            this.sub();
        },
        btn2(){
            // 直接通过this进行调用
            this.subN(10);
        }
    }

注意：mutations里面不能写异步代码

action用于在store里面执行异步操作

异步操作变更数据必须要用action，而不是使用mutation，但是使用action中还要通过触发mutaion的方式间接变更数据

第一种方法：

//定义
const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        add(state) {
            state.count++
        }
    },
    //用于执行异步操作处理
    actions: {}
})

// 调用
 methods:{
    btn3(){
      // 触发actions的第一种方式
      this.$store.dispatch('addAsync');
    }  
  }
}

触发actions异步任务时携带参数

//定义
const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        addN(state, step) {
            // 变更状态
            state.count += step
        }
    },
    actions: {
        addAsync2(context, step) {
            setTimeout(() => {
                context.commit('addN', step);
            }, 1000)
        }
    }
})

//调用
methods:{
    btn4(){
      // 触发actions时携带参数
      this.$store.dispatch('addAsync2',5);
    } 
  }
}

第二种方法：

按需引用

import {mapActions} from 'vuex'

methods:{
    ...mapActions(['addASync','addNASync'])
}

getter用于对store中的数据进行加工处理形成新的数据。

getter只起到包装数据的作用，不会修改store里面的原数据

1. getter可以对store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性
2. store中数据发生变化，getter的数据也会发生变化。

const store = new Vuex.Store({
    state: {
        count: 0
    }
    getters: {
        showNum: state => {
            return '当前最新的数量是【' + state.count + '】';
        }
    }
})

使用getter第一种方式

$store.getters.showNum
// 前面的this可以省略掉

使用getter第二种方式

import {mapGetters} from 'vuex'

computed:{
    ...mapGetters(['showNum'])
}