vuex笔记

vuex是一个专门为vue.js应用程序开发的状态管理模式。即data中属性同时有一个或几个组件同时使用，就是data中共用的属性。

安装vuex

 

知识点

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

const state = {
     count: 44               
}
const getters = {
　　count:function(state){
　　　　return state.count += 100;
　　}
}
const mutations = {
    jia(state,n){
          state.count += n; 
    },
    jian(state){
        state.count--
    }
}    
const actions = {
　　jiaplus(context){　　// context 整个Store
　　　　context.commit('jia',{a:1});
　　　　setTimeout(()=>{
　　　　　　context.commit('jian');
　　　　},3000);
　　　　console.log('我先被执行了！');
　　},
　　jianplus({commit}){
　　　　commit('jian');
　　}
}
export default new Vuex.Store({
    state,
　　 getters,
    mutations,
　　actions
})

 

1. State

访问状态对象：常量，数字，不变的

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

 

2.Getters

计算属性

import {mapState,mapGetters} from vuex
export default{
　　computed:{
　　　　...mapState(['count']),
　　　　//count(){
　　　　//　　return this.$store.getters.count
　　　　//}
　　　　...mapGetters(['count'])
　　}
}　　

 3.Mutations

方法对象，触发状态。 

import {mapMutations} from 'vuex';
export default{
　　methods:mapMutations([
　　　　'jia',
　　　　'jian'　　
　　])
}
<button @click="$store.commit('jia',10)">+</button>　　//commit 触发方法
<button @click="jian">-</button>　　

 4.Actions

异步触发状态

import {mapState,mapMutations,mapActions} from 'vuex';
export default{
　　computed:{
　　　　...mapState(['count'])
　　},
　　methods:{
　　　　...mapMutations(['jian','jia']),
　　　　...mapActions(['jiaplus']),
　　　　...mapActions({jianplus:'jianplus'})
　　}    
}
<button @click="jiaplus">+</button>
<button @click="jianplus">-</button>

 5.module

　　

 

 

 

 

 

参考

Vuex学习笔记（-）安装vuex： https://www.cnblogs.com/chengkun101/p/7979153.html