一、安装vuex

指定vuex@next默认安装最新版的vuex

npm install vuex@next --save
yarn add vuex@next --save

二、什么是store

store可以理解为一个对象，包含state、mutations、actions、getters四个字段，

state：是一个函数，返回值包含了应用层级的状态
getters：是一个对象，getter可以理解为store的计算属性，它根据state派生出一些状态
mutations：是一个对象，里面定义了改变状态的方法，通过提交commit触发mutation改变状态
actions: 是一个对象，里面可以包含异步操作，通过dispatch触发action，action不能直接更改状态，也是通过提交commit触发mutation

const moduleA = {
  state: () => ({ 
      count: 1
  }), 
  getters: { 
    doubleCount: (state) => {
      return state.count*2
    }
  },
  mutations: { 
    increment (state) {
      // 变更状态
      state.count++
    }
  }, 
  actions: { 
     //3秒之后变更状态
    incrementSync (context) {
        // 通过commit提交改变状态
        setTimeout(context.commit('increment'), 3000)
    }
  },
}

store可以理解为全局对象，但和全局对象又有如下区别

store中存储的状态是响应式的，store中的状态发生变化时，引用这些状态的组件也会得到更新。
不能直接修改store中的状态，只能通过提交commit改变store中的状态

三、创建store

上面创建的moduleA对象，还只是一个普通对象，还不是真正的store。我们需要使用vuex提供的createStore方法创建出storestore = createStore(moduleA)，并通过app.use函数，将store安装到app中。此时我们就可以通过store.state获取状态，通过store.commit方法触发状态变更。

import { createApp } from 'vue'
import { createStore } from 'vuex'
const store = createStore(moduleA)
const app = createApp({ /* 根组件 */ })
// 将 store 实例作为插件安装
app.use(store)

四、使用store

vuex提供了组合式API，可以通过useStore函数，来在 setup 钩子函数中访问 store

访问state和getter，需要创建computed应用保留住响应性。
要使用 mutation 和 action 时，只需要在 setup 钩子函数中调用 commit 和 dispatch 函数。

import { useStore } from 'vuex'
export default {
  setup () {
    const store = useStore()
    return {
        // 访问state
        count: computed(() => store.state.count)
        // 访问getter
        double: computed(() => store.getters.doubleCount)
        // 使用 mutation
        increment: () => store.commit('increment'),
        // 使用 action
        asyncIncrement: () => store.dispatch('asyncIncrement')
    }
  }
}

四、项目结构

对于大型的应用，可以将vuex中的store分模块管理，下面是项目结构示例

└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

每个模块分别定义，state, getters, actions, mutaions，并将其导出，为了解决不同模块命名冲突的问题，将不同模块的namespaced:true，在组件中读取/变更模块的状态时，需要加上所属的模块名。

// index.js，在根模块引入子模块 

import cart from './modules/cart'
export default createStore({
  modules: {
    cart
  }
})

//cart.js，定义模块级别的`state, getters, actions, mutaions`，并将其导出

const state = {...} 
const getters = {...}
const actions = {...}
const mutations = {...}
export default {
  namespaced: true,//解决不同模块命名冲突的问题
  state,
  getters,
  actions,
  mutations
}

// 在组件中使用，需要加上所属的模块名。
export default {
  setup () {
    const store = useStore()
    const checkoutStatus = computed(() => store.state.cart.checkoutStatus)
    const products = computed(() => store.getters['cart/cartProducts'])
    const checkout = (products) => store.dispatch('cart/checkout', products)
    return {
      checkoutStatus,
      products,
      checkout
    }
  }
}

总结

本文介绍了vuex4的安装，store的概念，store的创建和使用，以及使用vuex的项目组织结构。

vuex.4 基本使用总结

一、安装vuex

二、什么是store

三、创建store

四、使用store

四、项目结构

总结