vuex是什么
- 每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。
- Vuex 的状态存储是响应式的。
- 你不能直接改变 store 中的状态(变量的值),改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
vuex有什么用
- 跨组件通信
什么时候用
- 当两个组件不是父子关系的时候使用
vuex的核心概念
- state 是一个对象,里面存放我们需要用的变量
- getter 获取state里面的变量(非必须,用了会更方便)
- mutation 用来改变state里面的变量(状态)
- action 动作,用来提交mutation
- module模块,项目需要用到state的变量很多的情况下,使用module来拆分(非必需,用了便于维护)
配置vuex
先安装vuex npm install vuex --save
建个文件夹(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中属性的语法
- this.$store.state.msg
- 用过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持久化
安装 npm i vuex-persistedstate --save-dev
import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({ state, getters, mutations, plugins: [createPersistedState()] })
使用module拆分store
定义模块,模块也会拥有state,getters,mutations,actions,module
导入模块
import city from './module/city'
- 配置
const store = new Vuex.Store({
state,
getters,
mutations,
actions,
plugins: [createPersistedState()],
modules: {
city
}
})
