vuex详解

vuex的详细使用说明

1、安装

npm i --save-dev vuex

2、实例化vuex

创建store/index.js文件， 在mian.js中将实例注入到vue实例中

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

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        
    },
    getters: {

    },
    mutations: {
       
    },
    actions: {
        
    },
    modules: {

    }
})

3、取vuex里面的值

1）方法一

直接在组件中  this.$store.state.xxx

2）方法二

import { mapState } from "vuex";

computed: {
	...mapState(["count"])
}

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

4、往vuex里面存值

1）方法一

A、同步存值

this.$store.commit("addCount", 3);


mutations：{
	addCount(state, val) {
        state.count = val;
    }
}

B、异步存值

this.$store.dispatch("addCountAsync", 3).then(()=>{
	// 异步回调回来之后的业务逻辑
})

actions： {
	addCountAsync({commit, state}, payload) {
        return new Promise((resolve, reject)=>{
           setTimeout(()=>{
	            commit("addCountAsync", payload);
	            console.log(state.count);
	            resolve();
            }, 300)
        })
    }
}


mutations: {
    addCountAsync(state, val) {
        state.count = val;
    }
}

2）方法二

A、同步存值

import { mapMutations } from "vuex"

methods: {
    ...mapMutations(['addCount']),

    handleClick() {
        this.addCount(10);  // addCount这个方法要和mapMutations里面的名字一样，10是传进去的值
    }
}

mutations: {
    addCount(state, val) {
         state.count = val;
    }
}

B、异步存值

import { mapActions } from "vuex"

methods: {
    ...mapActions(['addCountAsync']),

    handleClick() {
        this.addCountAsync(20).then(()=>{
            // 存进去之后的逻辑
        })
    }
}


actions: {
   addCountAsync({commit, state}, payload) {
    	return new Promise((resolve, reject)=>{
    		setTimeout(()=>{ 
    		    commit('tets', payload);
    		    resolve();
    		 }, 1000)
    	})
   }
}

mutations: {
    tets(state, val) {
        state.count = val;
    }
}

5、vuex中的计算属性的使用

state: {
	count1: 0,
	count2: 0
},
getters: {
    sum(state) {
        return state.count1 + state.count2;
    }
}

//使用
import { mapGetters, mapState } from "vuex"

computed: {
    ...mapGetters(['sum']),
    ...mapState(['count1', 'count2'])
}

6、vuex中的module使用

在store中

import module1 from "./module1.js"
export default new Vuex.Store({
    modules: {
        'm_module': module1   // m_module 是模块的名字， module1是新建的module.js文件模块
    }
})

module1.js中

export default {
    namespaced: true,

    state: ()=>({
       
    }),

    getters: {
        
    },

    mutations: {
        
    },

    actions: {
        
    }
}

组件中取值

import { mapState, mapGetters } from "vuex"

computed: {
    ...mapState('m_module', ['count1', 'count2']),
    ...mapGetters('m_module', ['sum'])
}

另外一种存值取值方法

this.$store.commit('m_module/addCount', "要存进去的值");

this.$store.state.m_module.count;

异步存值

// 组件中
import { mapActions } from "vuex"

methods: {
    ...addCountAsync('m_module', ['addCountAsync']),
    
	handleClick() {
        this.addCountAsync().then(()=>{
             // 异步存值之后的业务
        })
    }
}


// vuex中
actions: {
	addCountAsync({commit}) {
		return new Promise((resolve, reject)=>{
             setTimeout(()=>{
                 commit('addCountAsync');
                 resolve();
             }, 1000)
        })
    }
}


mutations: {
    addCountAsync(state) {
        state.count++;
    }
}

state： () => ({
	count: 0
})

getters: {
    sun(state) {
        return state.count * 100;
    }
}

7、持久化存储

1）下载插件 vuex-persistedstate

2）

// store/index.js 文件中
import createPersistedState from "vuex-persistedstate"

state: {
   msg: "许潇",
    obj: {
        name: "foo"
    }
},
actions: {},
plugins: [
    createPersistedState({
        // 存储方式 local session cookie
        storage: window.localStorage,
        // 本地存储的 key
        key: "store",
        // 要存储state里面的哪些值
        reducer(state) {
            // state里面的状态全部持久化
            // return { ...state }

            // 只持久化部分数据
            return {
                msg: state.msg
            }
        }
    })
]