1. Vuex的基本使用
vuex的安装：
npm i vuex
vuex的配置，@/store/index.js：
import {createStore} from 'vuex'//导入createStore构造函数
export default createStore({
state:{ //Vuex的状态，实际上就是存数据的地方
person:{
name:'jack',
age:200
}
},
getters:{ //提供获取Vux状态的方式, 注意在组件中调用时getPerson是以属性的方式被访问
getPerson(state){
return state.person
}
},
mutations:{ //提供直接操作Vuex的方法，注意mutations里的方法中不能有任何异步操做
ageGrow(state, value){
//第一个参数state为Vuex状态；第二个参数为commit函数传来的值
state.person.age += value
}
},
actions:{ //提供通过mutations方法来简介操作Vuex的方法
ageGrow(context, value){
//第一个参数context为上下文，提供一些方法；第二个参数为dispatch函数传来的值
context.commit('ageGrow', value)
}
},
})
在@/main.js中引入：
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
const app = createApp(App)
app.use(store)
app.mount('#app')
在组件中使用Vuex:
<template>
<h1>名字：{{person.name}}--年龄：{{person.age}}</h1>
<input type="text" v-model="value">
<button @click="ageGrow(value)">增加年龄</button>
<!-- 在input框输入一个数字，点击按钮，可以看到年龄发生变化，说明Vuex正常工作 -->
</template>
<script>
import {useStore} from 'vuex'
import {ref} from 'vue'
export default {
setup(){
const store = useStore() //获取store对象
let person = store.getters.getPerson //从组件中获取状态(数据)person 方式一
// let person = store.state.person //从组件中获取状态(数据)person 方式二
let value = ref('输入年龄的增量')
function ageGrow(ageGrowth){
ageGrowth = parseInt(ageGrowth)
if(isNaN(ageGrowth)){
ageGrowth = 0
}
store.dispatch('ageGrow', ageGrowth)
//通过dispatch来调用actions里的'ageGrow'方法，参数为ageGrowth
//actions的方法又会通过commit来调用mutations里的方法，从而引起状态(数据)的变化
//也可以在组件里跳过dispatch actions，直接store.commit
}
return {
person,
value,
ageGrow
}
}
}
</script>
<style></style>
把代码复制粘贴到脚手架中运行，可以看到直观的效果，有助于理解。
小结：安装完vuex之后，首先要用creatRouter构造函数创建一个router对象，并在main.js中引入这个对象。然后在组件中，通过userStore方法来获取这个router对象，进一步通过getter或者state可以得到Vuex状态(数据)，通过dispatch->actions->mutations->state的数据传送方式可以操作和改变Vuex的状态(数据)
2. Module
Vuex官方原话：“由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。”
什么叫单一状态树呢，其实就是上文中的state对象。在Vuex的基本使用中，我们使用state对象来存储Vuex的状态，state对象里面可以嵌套其他的对象，它是一个树形的结构，而且这个state对象是唯一的，所有的状态都要存储在这一个对象里。因此，我们称之为单一状态树。
这种单一状态树的弊端是显而易见的，对于中大型项目来说，要托管给Vuex的状态有很多，把这些海量的数据如果都塞到一个文件里面的一个对象里面，未免显得过于臃肿，不管是开发起来还是维护起来都会有很多不变。
对此，官方给出了解决方案：
“为了解决以上问题，Vuex 允许我们将 store 分割成模块（module） 。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割”
2.1 vuex中模块化的基本使用
vuex的模块化没什么难理解的，就是把store给拆开，一个对象拆成多个对象，一个文件拆成多个文件，并且彼此可以拥有独立的命名空间。
道理很简单，所以直接看样例：
文件结构
├──src
├── components
│ └── Test.vue
└── store
├── index.js
└── modules
├── male.js
└── female.js
index.js
import {createStore} from 'vuex'
import female from './modules/female' //导入模块
import male from './modules/male' //导入模块
export default createStore({
modules:{ //使用模块
female,
male
}
})
male.js
export default {
namespaced:true, //namespaced:true代表该模块带有独立命名空间
state:{ //否则，默认是处于全局命名空间，就和非模块化一样
personList:[
{name:'张飞', id:'004'},
{name:'武则天', id:'005'},
{name:'秀吉', id:'006'},
]
},
mutations:{
addMutation(state, value){ //往personList中添加一个人
state.personList.push(value)
},
removeMutaion(state, value){ //往personList中删除一个人
state.personList = state.personList.filter((el) => el.id != value.id)
}
},
actions:{
addAction(context, value){
setTimeout(() => {
context.commit('addMutation', value) // ->'male/addMutation'
}, 1000);
},
removeAction(context, value){
context.commit('removeMutaion', value)
}
},
getters:{
personList(state){
return state.personList
}
}
}
female.js
export default {
namespaced:true, //namespaced:true代表该模块带有独立命名空间
state:{ //否则，默认是处于全局命名空间，就和非模块化一样
personList:[
{name:'李白', id:'001'},
{name:'孙尚香', id:'002'},
{name:'大乔', id:'003'},
]
},
mutations:{
addMutation(state, value){ //往personList中添加一个人
state.personList.push(value)
},
removeMutaion(state, value){ //往personList中删除一个人
state.personList = state.personList.filter((el) => el.id != value.id)
}
},
actions:{
addAction(context, value){
setTimeout(() => {
context.commit('addMutation', value) // ->'female/addMutation'
}, 1000);
},
removeAction(context, value){
context.commit('removeMutaion', value)
}
},
getters:{
personList(state){
return state.personList
}
}
}
Test.vue
<template>
<h1>女人：</h1>
<li v-for="femalePerson in femalePersons" :key="femalePerson.id">
{{femalePerson.name}}
<button @click="addToMale(femalePerson)">添加到男人</button>
</li>
<h1>男人：</h1>
<li v-for="malePerson in malePersons" :key="malePerson.id">
{{malePerson.name}}
<button @click="addToFemale(malePerson)">添加到女人</button>
</li>
<!-- 有两个列表，分布是男人和女人，通过点击按钮可以把列表中的某些项添加到另一个列表中 -->
<!-- 建议粘贴复制并运行代码，这样更直观 -->
</template>
<script>
import { computed } from '@vue/runtime-core';
import {useStore} from 'vuex'
export default {
setup(){
let store = useStore()
let malePersons = computed(() => store.getters['male/personList']) //通过getter获取state
let femalePersons = computed(() => store.state.female.personList) //直接获取state
function addToMale(person){
store.dispatch('male/addAction', person)
store.dispatch('female/removeAction', person)
//如果模块中namespaced === true，那么要在方法名前面添加模块的逻辑路径
//index.js里使用的模块为路径的起点。
//比如index里面有一个moduleA，moduleA有一个子模块moduleB，module有一个action是actionx
//那么调用方式为 store.dispatch('moduleA/moduleB/actionx', value)
}
function addToFemale(person){
store.dispatch('female/addAction', person)
store.dispatch('male/removeAction', person)
}
return {
malePersons,
femalePersons,
addToMale,
addToFemale
}
}
}
</script>
<style></style>
2.2 在命名空间中访问全局内容
什么是全局内容？不在同一个模块中的内容就是全局内容。
比如，对于上文中的female模块来说，male模块中的getters state action mutations就是全局内容，接下来将会讲解如何在一个模块中访问到全局内容。
为了便于理解，我创造了一个新的样例：
├──src
├── components
│ └── Test.vue
└── store
├── index.js
└── modules
├── moduleA.js
└── moduleB.js
index是所有的模块的根，moduleA和moduleB是两个子模块，接下来要做的事情就是在index.js、moduleA.js、moduleB.js中写一些getters state action mutations，最终达成的效果是在index中访问moduleA的内容，在moduleA中访问moduleB的内容，在moduleB中访问index的内容。
index.js:
import {createStore} from 'vuex'
import moduleA from './modules/moduleA' //导入模块
import moduleB from './modules/moduleB' //导入模块
export default createStore({
state:{info:{name:'root', num:100}},
getters:{
state: state => state,
moduleAStateThroughRoot: (state, getters, rootState, rootGetters) => {
//在getter中访问全局内容
//rootState为根状态，rootGetters为根getters，这两个属性是访问全局内容的工具
//通过模块A的来获得root的状态
//因为这里本身就是模块的根，所以这里的state和rootState、getters和rootGetters是一个东西
// console.log(state === rootState, getters === rootGetters); // true true
return rootGetters['moduleA/state']
// return rootState.moduleA
}
},
actions:{addAction: (context, value) => {context.commit('moduleA/addMutation', value)}},
mutations:{addMutation: (state, value) => {state.info.num += value}},
modules:{ //使用模块
moduleA,
moduleB
}
})
moduleA.js:
export default {
namespaced :true,
state:{info:{name:'moduleA', num:200}},
getters:{
state: state => state,
moduleBStateThroughModuleA: (state, getters, rootState, rootGetters) => {
//在getter中访问全局内容
//rootState为根状态，rootGetters为根getters，这两个属性是访问全局内容的工具
//通过模块B的来获得模块A的状态
// return rootState.moduleB
return rootGetters['moduleB/state']
}
},
actions:{
addAction: (context, value) => {context.commit('moduleB/addMutation', value, {root:true})},
//context中包含dispatch, commit, getters, rootGetters
//在action中调用全局mutation，只需要在commit函数中添加第三个参数{root:true}，这样第一个参数就会被当作全局内容来解析。
//在action中调用全局action，与上述同理。
//同时，还可通过rootGetters访问全局getters
globalAction:{
root: true, //添加root:true属性，即可把globalAction注册为全局action，具体内容写在handler中
handler: (context, value) => { //虽然是全局action，但参数中的上下文context仍然是局部的
alert(context.state.info.name) //弹出应该是moduleA
}
}
},
mutations:{addMutation: (state, value) => {state.info.num += value}},
}
moduleB.js
export default {
namespaced :true,
state:{info:{name:'moduleB', num:300}},
getters:{
state: state => state ,
rootStateThroughModuleB:(state, getters, rootState, rootGetters) => {
//在getter中访问全局内容
//rootState为根状态，rootGetters为根getters
//通过root的来获得模块B的状态
return rootGetters['state']
// return rootState
}
},
actions:{addAction: (context, value) => {context.commit('addMutation', value, {root:true})}},
//context中包含dispatch, commit, getters, rootGetters
//在action中调用全局mutation，只需要在commit函数中添加第三个参数{root:true}，这样第一个参数就会被当作全局内容来解析。
//在action中调用全局action，与上述同理。
//同时，还可通过rootGetters访问全局getters
mutations:{addMutation: (state, value) => {state.info.num += value}},
}
Test.vue:
<template>
<li> {{rootModule.name}}---{{rootModule.num}} <button @click="rootClick">rootAction---A++</button> </li>
<li> {{moduleA.name}}---{{moduleA.num}} <button @click="aClick">moduleAction---B++</button> </li>
<li> {{moduleB.name}}---{{moduleB.num}} <button @click="bClick">moduleAction---root++</button> </li>
<!-- 点击root，moduleA数字加一；点击moduleA，moduleB数字加一；点击moduleB，root数字加一 -->
<button @click="store.dispatch('globalAction')">触发全局action</button>
</template>
<script>
import {useStore} from 'vuex'
export default {
setup(){
let store = useStore()
console.log(store.getters);
let rootModule = store.getters['moduleB/rootStateThroughModuleB'].info //通过moduleB的getters获得root的状态
let moduleA = store.getters['moduleAStateThroughRoot'].info //通过root的getters获得moduleA的状态
let moduleB = store.getters['moduleA/moduleBStateThroughModuleA'].info //通过moduleA的getters获得moduleB的状态
// let moduleB = store.state.moduleB.info
// let moduleA = store.state.moduleA.info
// let rootModule = store.state.info
function rootClick(){store.dispatch('addAction', 1)} //调用root中的action，改变的是moduleA的状态
function aClick(){store.dispatch('moduleA/addAction', 1)}//调用moduleA中的action，改变的是moduleB的状态
function bClick(){store.dispatch('moduleB/addAction', 1)}//调用moduleB中的action，改变的是root的状态
return {rootModule,moduleA,moduleB,rootClick,aClick,bClick,store}
}
}
</script>
<style></style>
在模块中使用vuex
// import { State } from "@/type/test";
// import { useStore } from "vuex";
// const store = useStore()
/*
在模块中使用vuex时，上面的方式得到的store.state是undefined，下面这种方式才能正常得到state
不知道是什么原因
*/
import store from '../store'
export function increase(){
console.log(store.state)
}
3. vuex的typescript用法
vuex的typescript用法其实就是把state加上ts里的类型限制
3.1 不使用模块化
store文件
// store.ts
import { InjectionKey } from 'vue'
import { createStore, Store } from 'vuex'
// 为 store state 声明类型
export interface State {
count: number
}
// 定义 injection key
export const key: InjectionKey<Store<State>> = Symbol()
export const store = createStore<State>({
state: {
count: 0
}
})
在main.ts里引入
// main.ts
import { createApp } from 'vue'
import { store, key } from './store'
const app = createApp({ ... })
// 传入 injection key
app.use(store, key)
app.mount('#app')
在组件中使用useStore()获取store，将上述 injection key 传入 useStore 方法可以获取类型化的 store。
// vue 组件
import { useStore } from 'vuex'
import { key } from './store'
export default {
setup () {
const store = useStore(key)
store.state.count // 类型为 number
}
}
在每个组件中都导入key有些重复且麻烦，我们可以将useStore()封装成myUseStore()
// 在store.ts增加下面几行
import { useStore } from 'vuex'
export function myUseStore () {
return useStore(key)
}
3.2 使用模块化
store/index.ts
import { createStore, Store } from 'vuex'
import moduleA from './modules/moduleA'
import moduleB from './modules/moduleB'
import { InjectionKey } from 'vue'
//模块A state的类型
interface moduleAState {
name:string,
age:number
}
//模块B state的类型
interface moduleBState {
id:string,
adult:boolean
}
//vuex state类型
interface State{
moduleA:moduleAState,
moduleB:moduleBState
}
//如果使用模块化的话，在createStore参数里面就不要写state了，否则会报错
export const key: InjectionKey<Store<State>> = Symbol()
export const store = createStore<State>({
// state:{}, //不可以加这一行，否则报错
modules: {
moduleA,
moduleB
}
})
在组件中访问：
// vue 组件
import { useStore } from 'vuex'
import { key } from './store'
export default {
setup () {
const store = useStore(key)
store.state.moduleA// 类型为 moduleAState
store.state.moduleB// 类型为 moduleBState
}
}
待更新…
