内容简介:
- 借鉴 了 Flux、Redux、 The Elm Architecture
- 专为 Vue.js 设计 的状态管理模式
- 集中式存储和管理应用程序中所有组件的状态
- Vuex 也集成到 Vue 的官方调试工具
- 一个 Vuex 应用的核心是 store(仓库,一个容器),store 包含着你的应用中大部分的状态 (state)。
安装引入:
直接引入:
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>
NPM 引入:
npm install vuex@next --save
Yarn 引入
yarn add vuex@next --save
注册:
TS:
在 store/index.ts 中的modules: 中注册
import { createStore } from 'vuex'
export default createStore({
state: {
},
mutations: {
},
actions: {
},
modules: {
},
})
JS:
import Vue from 'vue'
import App from './App.vue'
配置 VueX
import store from './store'
new Vue({
store,
render: h => h(App)
}).$mount('#app')
基础内容:
state:
获取 token 状态 state(设置数据,对象) 设置 本地存储
state: { token: localStorage.getItem('token') || '' },
Mutations
Mutations 突变 注册 状态改变事件:
创建 token
mutations: { setToken(state: any, token: any) { state.token = token localStorage.setItem('token', token) } },
Actions:
Actions 行动 提交突变事件
第一种: actions: { actToken({ commit }: any, user: any) { commit('setToken', user) console.log(user.name); console.log("actions"); } }
第二种 actions: { actToken(context: any, user: any) { context.commit('setToken', user) } }
使用 commit 与 dispatch 修改存储的数据:
commit('A',B) || context.commit('A',B)
- A 为 调用的突变 函数名
- B 为 键值
- 在 Actions 中提交结束事件
C.dispatch('A',B)
A 为 调用的 Actions 中的方法名
如果 有 namespace: true, loginStore.dispatch("loginToken/actToken", form.value); 没有 loginStore.dispatch("actToken", form.value);
B 为 传入的 键值
设置 localstorage loginStore.dispatch("actToken", form.value);
C 为 导入的 store 包 实例的 对象
导包 useStore 从 vuex import { useStore } from "vuex"; 实例化 store 对象 const loginStore = useStore();