Vuex的简单使用及原理分析 | Vuex 的引入及其使用场景介绍

转载：https://mp.weixin.qq.com/s/iLDlpwom6ZmBNZzMGvAa9g

const store = new Vuex.Store({
  state:{
    count:0
  }
})

<template>       
    <div> state的数据：{{ $store.state.count }}</div>  
<template>
<script>
// 安装完 vuex 会在组件中注入一个 $store 的变量
created() {   
console.log(this.$store.state.count);
}
</script>

<template>       
    <div> state的数据：{{ count }}</div>
<template>
<script>
// 把state中数据，定义在组件内的计算属性中  
   computed: {    
     count () {      
return this.$store.state.count   
      }  
    }
</script>

<template>    
    <div> state的数据：{{ count }}</div>  
<template>
import {mapState} from 'vuex'
export default{
  computed:{
     ...mapState(['count'])
  }
}

const store = new Vuex.Store({ 
state: {    
count: [1,2,3,4,5,6,7,8,9,10]
},  
getters: {    
// getters函数的第一个参数是 state    
// 必须要有返回值     
  getCount:  state =>  state.list.filter(item => item > 5)  
  }
})

<template>    
   <div>     
<div> state的数据：{{ getCount }}</div>
   </div>
<template>
<script>  
 // 把state中数据，定义在组件内的计算属性中  
   computed: {    
     getCount () {      
       return this.$store.getters.getCount   
      }  
    }
</script>

import {mapGetters} from 'vuex'
export default{
computed:{
    ...mapGetters(['getCount'])
  }
}

const store = new Vuex.Store({
state:{
count:0
},
  mutations:{
  //   接受 state作为第一个参数
    mutationCount(state){
      state.count ++ ;
}
  //  向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）
    addCount (state, payload) {
state.count += payload.data
}
}
 })

methods:{
  changeCount(){
    this.$store.commit('mutationCount')
  }
}

import {mapMutations} from 'vuex'
export default{
  methods:{
    ...mapMutations(['mutationCount'])
  }
}

mutations: {
  someMutation (state) {
    setTimeout(() => {
      state.count++
    },1000)
  }
}

const store = new Vuex.Store({
state:{
count:0
},
   mutations:{
mutationCount(state,payload){
state.count = payload;
}
   },
   actions:{
     actionCount(context,payload){
       setTimeout(()=>{
         context.commit('mutationCount',payload.count)
       },1000)
     }
   }
})

methods:{
  changeCountAsync(){
     this.$store.dispatch('actionCount',res)
  }
}

import {mapActions} from 'vuex'
export default{
methods:{
     ...mapActions(['actionCount'])
   }
 }

// 假设 getData() 和 getOtherData() 返回的是 Promise
actions: {
async actionA ({ commit }) {
    commit('gotData', await getData())
  },
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

const moduleA = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... },
getters: { ... }
}

const moduleB = {
state: () => ({ ... }),
mutations: { ... },
actions: { ... }
}

const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

const moduleA = {
state: () => ({
count: 0
}),
mutations: {
increment (state) {
// 这里的 `state` 对象是模块的局部状态
state.count++
}
},

getters: {
doubleCount (state) {
return state.count * 2
}
}
}

const moduleA = {
// ...
getters: {
sumWithRootCount (state, getters, rootState) {
return state.count + rootState.count
                }
          }
}

const store = new Vuex.Store({
modules: {
account: {
namespaced: true,
// 模块内容（module assets）
state: () => ({ ... }), // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
getters: {
isAdmin () { ... } // -> getters['account/isAdmin']
},
actions: {
login () { ... } // -> dispatch('account/login')
},
mutations: {
login () { ... } // -> commit('account/login')
},

// 嵌套模块
modules: {
// 继承父模块的命名空间
myPage: {
state: () => ({ ... }),
getters: {
profile () { ... } // -> getters['account/profile']
}
},

// 进一步嵌套命名空间
posts: {
namespaced: true,

state: () => ({ ... }),
getters: {
popular () { ... } // -> getters['account/posts/popular']
            }
          }
        }
      }
    }
})

npm install vuex --save

import {createStore} from 'vuex';
export default createStore({})

import {createApp} from 'vue';
import App from './App.vue';

import {store} from './store';
createApp(App).use(store).mount('#app);

// src/store.js
export function install (_Vue) {
  if (Vue && _Vue === Vue) {
    return
  }
  Vue = _Vue
  applyMixin(Vue)//在所有组件的beforeCreate注入了设置this.$store这样的一个对象,
  //在任意组件中执行this.$store都能找到store对象
}

// src/store.js
function resetStoreVM (store, state, hot) {
// 省略无关代码
  Vue.config.silent = true
//本质：将我们传入的state作为一个隐藏的vue组件的data
//也就是说，我们的commit操作，本质上其实是修改这个组件的data
  store._vm = new Vue({
    data: {
      $$state: state
    },
    computed
  })
}
//this.$store._vm.$data.$$state===this.$store.state

Vuex 的引入及其使用场景介绍

转载： https://mp.weixin.qq.com/s/2V0Mv6flZvjr6SxrUmxOpQ

注：新版本的安装命令为：npm i vuex@next -S 。

npm view vuex versions --json

npm i vuex@3.6.2 -S

npm install

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {};
const getters = {};
const mutations = {};
const store = new Vuex.Store({
    state,
    getters,
    mutations,
});
export default store;

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
    _defaultMap: '', //默认底图
};
const getters = {
    _getDefaultMap() {
        return state._defaultMap;
    },
};
const mutations = {
    _setDefaultMap(state, value) {
        state._defaultMap = value;
    },
};
const store = new Vuex.Store({
    state,
    getters,
    mutations,
});
export default store;

this.$store.commit('_setDefaultMap', map);

const map = this.$store.getters._getDefaultMap;

<div v-show="this.$store.getters._getDefaultVisible"></div>

const currentVisible = this.$store.getters._getDefaultVisible;
this.$store.commit('_setDefaultVisible', !currentVisible);