vuex跨组件通信

vuex是什么

1. 每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。
2. Vuex 的状态存储是响应式的。
3. 你不能直接改变 store 中的状态(变量的值),改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。

vuex有什么用

1. 跨组件通信

什么时候用

1. 当两个组件不是父子关系的时候使用

vuex的核心概念

1. state 是一个对象,里面存放我们需要用的变量
2. getter 获取state里面的变量(非必须,用了会更方便)
3. mutation 用来改变state里面的变量(状态)
4. action 动作,用来提交mutation
5. module模块,项目需要用到state的变量很多的情况下,使用module来拆分(非必需,用了便于维护)

配置vuex

1. 先安装vuex npm install vuex --save

2. 建个文件夹(vuex) 在vuex下面再建个文件夹(store) 在store下面建个index.js 在index.js里面配置

/* 
vuex 配置
*/
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

// 定义state
const state = {
    msg: 'hello vuex',
    isLogin: false,
    isOpen: false
}

// 定义getters
const getters = {
    // 获取isLogin的getter
    /* isLogin: (state) => {
        return state.isLogin
    }, */
    isLogin: (state) => state.isLogin,
    msg: (state) => state.msg,
    isOpen: (state) => {
        return state.isOpen
    }
}

// mutations
const mutations = {
    // 定义一个用来改修isLogin的mutation
    /* 
     * @param {state} 上面的state对象
     * @param {payload} isLogin要修改成的值
    */
    updateLogin(state, payload) {
        // 修改state里面的isLogin的值
        state.isLogin = payload;
    },

    // 修改msg 
    updateMsg(state, payload) {
        // 修改state里面的isLogin的值
        state.msg = payload;
    }

    // 其他的mutation

}

// actions,用来commit(提交)  mutation 用来调用mutations里面的函数
const actions = {
    /* 
     * 定义一个action用来commit(提交)mutation里的updateLogin
    */
    updateLogin(state, payload) {
        state.commit('updateLogin', payload);
    },

    // 提交msg的mutation
    updateMsg(state, payload) {
        state.commit('updateMsg', payload);
    }
}

const store = new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})
// 导出store
export default store

在vuex文件夹下建个main.js 接受从index.js导出来的store

import Vue from 'vue'
import store from './store/index'
import App from './App'

new Vue({
    store,
    render: h => h(App),
  }).$mount('#app')

在组件中获取store中属性的语法

1. this.$store.state.msg
2. 用过getter获取

<script>
// 先导入mapGetters
import { mapGetters } from 'vuex'
export default {
   // 然后把它写在计算属性里面
   // mapGetters方法传的参数是一个数组形式
   computed: {
       ...mapGetters(['msg']) 
   }
}
</script>

在组件中修改store中属性的语法

<template>
    <main>
        <P>msg: {{msg}}</P>
        <input v-model="content" type="text">
        <button @click="changeMsg">修改</button>
    </main>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
    data() {
        return {
            content: ''
        }
    },
    computed: {
        ...mapGetters(['msg'])
    },
    methods: {
        changeMsg() {
            let content = this.content;

            // 派发action
            this.$store.dispatch('updateMsg', content);
        }
    }
}
</script>

还有一种修改方法：

this.$store.commit('updateLogin', true);

vuex持久化

1. 安装 npm i vuex-persistedstate --save-dev

2. import createPersistedState from 'vuex-persistedstate'

3. const store = new Vuex.Store({
       state,
       getters,
       mutations,
       plugins: [createPersistedState()]
   })
   

使用module拆分store

1. 定义模块,模块也会拥有state,getters,mutations,actions,module

2. 导入模块

import city from './module/city'

3. 配置

const store = new Vuex.Store({
    state,
    getters,
    mutations,
    actions,
    plugins: [createPersistedState()],
    modules: {
        city
    }
})