VueX 安装使用（含TypeScript）

内容简介：

1. 借鉴 了 Flux、Redux、 The Elm Architecture
2. 专为 Vue.js 设计 的状态管理模式
3. 集中式存储和管理应用程序中所有组件的状态
4. Vuex 也集成到 Vue 的官方调试工具
5.  一个 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)

1. A 为 调用的突变 函数名
2. B 为 键值
3. 在 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();