vuex学习笔记

vuex学习笔记

安装与导入

安装

npm i vuex --save

导入vuex包

import Vuex from 'vuex'
Vue.use(vuex)

创建与挂载（如果直接使用脚手架安装vuex可以跳过）

创建一个新的store.js文件，创建store对象

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

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {},
    actions: {},
    modules: {}
})

创建完对象后，将此对象在main.js文件中进行挂载：

import store from './store'//增加这个，路径写store.js的路径

Vue.config.productionTip = false

new Vue({
  router,
  store, //增加这个组件
  render: h => h(App)
}).$mount('#app')

vuex四大属性

State

唯一公共数据源，所有数据存在这里

访问

1. this.$store.state.数据名直接在vue文件中进行访问

<div>
    <h3>{{$store.state.count}}</h3>
</div>

2. 通过mapState进行访问

import { mapState } from 'vuex';
export default {
    computed:{
        ...mapState(['count'])
    }
}

这样一来，就可以通过t数据名在文件中访问：

<div>
    <h3>{{count}}</h3>
  </div>

Mutation

这个模块的作用为变更，调用方法进行计算封装的操作模块
编写：
在store.js中的mutations模块中以方法的形式来编写函数（类似于vue中的methods方法）

mutations: {
        add(state，val) {//第一个参数为调用state里面的属性，第二个参数开始传值
            state.count+=val;
        }
    },

调用：

1. 在vue页面中的computed方法中调用，e.g.:

computed:{
        ...mapState(['count'])//然后可以通过this.$store.commit('mutations中的方法进行调用')
    }

2. 从vuex中导入mapMutations函数，并在methods中调用

import { mapMutations } from 'vuex';
export default {
    methods: {
        add1() {//通过this.函数名进行调用
            this.add(2)//如果mutations函数中有形参传递，则括号内加形参。
        },
        ...mapMutations(['add'])//方括号里面传递store.js中的mutations函数名
    },}

Action

用于处理异步任务，比如定时器之类的函数
编写：在actions模块中编写自己的异步函数：

actions: {
        addlate(context, step) {
            setTimeout(() => {
                context.commit('add', step)
            }, 1000)
        }
    },

调用：

1. 使用this.$store.dispatch进行调用

//绑定在某个函数中，直接进行调用，便可以盗用异步函数
add1() {
            this.$store.dispatch('addlate',5)
        },

2. 使用mapActions进行调用

<template>
	<button @click="add1">+1</button>//click括号里除了可以写add1以外还可以直接写异步调用的函数名，例如addlate(5)
</template>
import { mapActions } from 'vuex';
export default {
    methods: {
        add1() {
            this.addlate(5)//这里直接用this加上方法名进行调用
        },//形参？在括号里写参数: 不写任何东西
        ...mapActions(['addlate'])//这里写异步调用的函数
    },
   }

Getter

用于对store中的数据进行加工生成新数据，类似于vue的compute属性，store中的数据变化，getter中的数据也会跟着变化
getter不会修改store数据中的值
编写：

getters:{
      showNum: state =>{
        return '当前最新的数据是' +state.count
      }
    },

调用：

1. 直接使用this.$store.getters.方法名 进行调用

    <h3>{{$store.getters.showNum}}</h3>

2. 使用mapGetters进行调用

<template>
  <div>
    <h3>{{showNum}}</h3>   //直接对此属性进行调用
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    computed:{
        ...mapGetters(['showNum']) //引入属性
    }
}
</script>