Vuex4

说明

注意：匹配vue3

vuex：vue前端开发可能使用的一个模块，用于存储并管理共享状态，所有共享状态和定义的操作方法均封装于store对象中；虽不使用vuex也可实现，但需要状态逐层传递十分麻烦，而且高耦合。vuex相当于共享空间，组件将共享状态存与vuex，想要访问直接在vuex中取便可;此外vuex自动将store实例“注入“到了所有组件中。通过this.$store便可直接访问

官方文档：https://vuex.vuejs.org/zh/guide/

注意：不可存直接存num数据（num：1 ，不可，改不了值）

1. Vuex常用方法

	说明
createStore	store创建工厂，用于对store默认值进行配置
useStore	获取store属性

2. Store属性

store：vuex中的属性，用于存储共享状态，定义调用操作共享状态的函数等。可通过useStore，createStore或直接this.$store获取

Store核心属性

属性	作用
state	单一状态树，存所有共享状态
getters	在vuex中对共享状态进行函数操作，return的结果以计算属性形式存在（vue3.0版本不是，vue3.1版本会修复），（没测试过是否会更改共享状态的值）
mutations	在vuex中对共享状态进行方法操作（无返回），更改共享状态的值
actions	在vuex中调用mutation
modules	局部化状态，当有大量共享对象时，均存于同一state时，该对象变得十分臃肿。这是可使用module将共享对象分模块；其内同样有state，getters…。 （子模块对父模块中属性/对象有继承关系）

3. 安装

npm install vuex@next --save

4. 配置文件格式

• 文件名：index.js

• 位置：src/store

import {createStore} from 'vuex'

export default createStore({
    state: {
        tagsList: [],
        collapse: false
    },
    getters: {
        countTags(state){
            return state.tagsList.length;
        }

    },
    mutations: {
        // 侧边栏折叠
        handleCollapse(state) {
            state.collapse = !state.collapse;
        },
        setTagsItem(state, data) {
            state
                .tagsList
                .push(data)
        }
    },
    actions: {
        handleCollapse(context){
            context.commit('handleCollapse');
        }

    },
    modules: {
            state:{
                //xxx
            },
            mutations:{
                //xxx
            },
            actions: {
                //xxx
            },
            getters:{
                //xxx
            },
            modules:{
                //xxx
            }
    }
})

5. 挂载

• 文件名： main.js

import {createApp} from 'vue'
import App from './App.vue'
import store from './store'
const app = createApp(App)
app
    .use(store)
    .mount('#app')

6. 使用模板

组合式api风格

• 注意：为保持共享状态的响应性，必须用在vue的computed中获取；用vue的ref或reactive均不可

import { computed } from 'vue'
    import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore();
    // 在 computed 函数中访问 state   
	const collapse = computed(() => store.state.collapse);
	// collapse.value 该共享状态的值
	
	
    // 在 computed 函数中访问 getter
    const double = computed(() => store.getters.double)
	
    // 侧边栏折叠
    const collapseChage = () => {
       store.commit("handleCollapse", !collapse.value);
        };	
        
	// 使用 mutation
	const increment = () => store.commit('increment');
	
	// 使用 action
    const asyncIncrement: () => store.dispatch('asyncIncrement')

    return {
      collapse,
      double,
      collapseChage,
      increment,
      asyncIncrement
    }
  }
}