标签：... Vue 入门 state 极速 Vuex store user

01、什么是Vuex？

1.1、为什么需要状态管理？

在复杂的系统中，我们会把系统按照业务逻辑拆分为多个层次、多个模块，采用组件式的开发方式。而此时不同模块、父子模块之间的通信就成了一个问题。

为了解决这个问题，就有了状态管理，核心概念就是把大家共享的状态（数据）抽出来，放到一个全局共享的仓库里，按照一定约定统一管理，让状态的变化可预测。这就有两个关键点：

统一存储：共享的状态统一存储，全局共享。
可预测：共享的状态不可随意修改，需要按照约定的规则修改，才能监测状态变更、通知更新。

1.2、Vuex简介

Vuex 就是面向Vue的状态管理组件，采用集中式存储+管理应用的所有共享状态。Vuex只能在Vue中使用，深度使用了Vue的能力，如用Vue来实现state的响应式特性。

Vue2.* 版本 ▶ 对应 Vuex3.* 版本，Vuex3.* 中文文档
Vue3.* 版本 ▶ 对应 Vuex4.* 版本，Vuex4.* 中文文档

简单来说，就是Vuex有一个全局公共的store（类似Vue里的data），作为公共数据仓库，保存了大家共享的状态（数据）。这个数据仓库store实现了数据响应、自动通知更新，这样就很容易实现了各个组件间的数据通信了。

其实，对于简单的应用不一定需要Vuex，不过Vuex文件并不大（gzip压缩后10K左右）。

Vuex主要特点就是：单向数据流+单一数据源。

state：存储数据仓库，类似Vue的data，也是响应式的，变更后会自动通知View。
views：组件视图，就是使用state的Vue组件。
actions：更新state状态，为了规范管理，state不能直接修改，必须通过action进行提交。Vuex中分为同步Mutation、和异步Action。

02、安装使用

通过<script>标签直接引用vuex.js：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3/dist/vuex.js"></script>
// 注册插件
Vue.use(Vuex);

通过 vue-cli 脚手架搭建vue的开发框架，集成了vuex组件。
注册插件：Vue.use(Vuex)

调试已经被集成在了Vue的调试工具Devtools中了。

03、Vuex3入门

3.1、Vuex选项&实例

Store构造器选项	描述
state	Vuex store 实例的根 state 对象
mutations	注册 mutation，就是修改数据的方法，参数为`state`。不支持异步，通过`store.commit(name)`调用
actions	注册 action，参数为`context`，同`store`实例，但不是她。支持异步，通过`store.dispatch(name)`调用
getters	注册 getter，`{ [key: string]: Function }`，参数为`state`，定义、使用同计算属性
modules	子模块的对象，分割管理store，{ key(moduleName) : {state, namespaced?, mutations?, actions? ... }}
strict	是否严格模式，默认false，true=严格模式下，任何 mutation 处理函数以外修改state 都会抛出错误。

✅store实例属性	描述
state	数据源`state`根对象
getters	所有注册的`getter`
✅store 实例方法
commit(name, arg?, options?)	提交 `mutation` 执行申请，`name`为`mutation`注册的方法名
dispatch(name, arg?, options?)	提交 `action` 执行申请，`name`为`action`注册的方法名
replaceState(state: Object)	替换 `store` 的根状态，用于合并状态，如加载持久化的`state`数据。
watch(fn, callback)	响应式地侦听 fn 的返回值，当值改变时调用回调函数
subscribe(handler, option?)	订阅 store 的 mutation，每一个mutation执行完调用
subscribeAction(handler, option?)	订阅 store 的 action
registerModule(path, module)	注册一个动态模块
unregisterModule(path)	卸载一个动态模块
hasModule(path)	检查模块是否以注册
hotUpdate(newOptions: Object)	热替换新的 action 和 mutation

const store = new Vuex.Store({
    strict:false,
    state: {  //定义数据结构-数据仓库
        points: 1000,
        user: { id: '001', name: 'sam' }
    },
    mutations: {  //修改数据的方法
        setUser(state, obj) {
            state.user.id = obj.uid;
            state.user.name = obj.uname;
        },
    },
    actions: {  //修改数据的方法-异步
        set(context, obj) { context.commit('setUser', obj) }
    },
    getters: {  //获取数据的计算属性
        userExist(state) { return state.user.id != ''; }
    }
})
//提交数据修改
store.commit('setUser',{uid:'007',uname:'zhangsan'});
console.log(store.state.user); //id : "007" name : "zhangsan"
console.log(store.getters.userExist); //true

3.2、Vuex核心流程

Vuex核心概念：

标签：...,Vue,入门,state,极速,Vuex,store,user
From： https://www.cnblogs.com/anding/p/16906778.html

Vuex极速入门