vuex的简单描述
vuex: Vue.js 应用程序开发的状态管理模式
store: 单一状态树
getter: 可以认为是 store 的计算属性
mutation:
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,同步
Action:
提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作
Module:
每个模块拥有自己的 state、mutation、action、getter
vuex的引用及方法定义
1、main.js中,将store注入根节点,每一个组件中就可以使用了
import store from './store'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
2、store文件夹中新建index.js内容如下
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 注册vuex
Vue.use(Vuex)
// 定义类型
const types = {
SET_AUTHENTICATED:"SET_AUTHENTICATED",
SET_USER:"SET_USER"
}
// 定义数据状态
const state = {
isAuthenticated:false,
user:{}
}
// 获取数据
const getters = {
isAuthenticated:state => state.isAuthenticated,
user: state => state.user
}
// 修改状态方法定义
const mutations = {
// 设置是否授权,
[types.SET_AUTHENTICATED](state,isAuthenticated){
if(isAuthenticated) state.isAuthenticated = isAuthenticated;
else state.isAuthenticated = false;
},
// 设置user
[types.SET_USER](state, user){
if(user) state.user = user;
else state.user = {};
}
}
// 异步操作用于调用mutation
const actions = {
setAuthenticated: ({commit}, isAuthenticated) => {
commit(types.SET_AUTHENTICATED, isAuthenticated)
},
setUser: ({commit},user) => {
commit(types.SET_USER,user)
},
// 退出登录--
clearCurrentState:({commit}) => {
commit(types.SET_AUTHENTICATED, false)
commit(types.SET_USER,null)
}
}
// 导出对象
export default new Vuex.Store({
state,
getters,
mutations,
actions
})
使用:
获取数据:
获取之后可直接使用html中可以直接用{{user}}
export default {
name:"head-nav",
// 获取vuex中user数据
computed: {
user(){
return this.$store.getters.user
}
},
}
设置数据:
//设置vuex store
this.$store.dispatch("clearCurrentState");