// store.js
import { reactive } from 'vue'

export const store = reactive({
 count: 0 })

// store.js
import { reactive } from 'vue'

export const store = reactive({
 count: 0,  increment() {  this.count++  } })

import { ref } from 'vue'

// 全局状态，创建在模块作用域下
const globalCount = ref(1)
 export function useCount() {  // 局部状态，每个组件都会创建  const localCount = ref(1)   return {  globalCount,  localCount  } } 

const Counter = {
  // 状态
  data () { return { count: 0 } }, // 视图 template: ` <div>{{ count }}</div> `, // 操作 methods: { increment () { this.count++ } } } createApp(Counter).mount('#app') 

import { useStore } from 'vuex' export default { setup () { const store = useStore() } }

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex' export default { // ... computed: mapState({ // 箭头函数可使代码更简练 count: state => state.count, // 传字符串参数 'count' 等同于 `state => state.count` countAlias: 'count', // 为了能够使用 `this` 获取局部状态，必须使用常规函数 countPlusLocalState (state) { return state.count + this.localCount } }) } 

computed: mapState([ // 映射 this.count 为 store.state.count 'count' ])

2.4.5、组件仍然保有局部状态

使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。

computed: {
  doneTodosCount () { return this.$store.state.todos.filter(todo => todo.done).length } } 

const store = createStore({ state: { todos: [ { id: 1, text: '...', done: true }, { id: 2, text: '...', done: false } ] }, getters: { doneTodos (state) { return state.todos.filter(todo => todo.done) } } }) 

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

getters: {
  // ...
  doneTodosCount (state, getters) { return getters.doneTodos.length } } 

store.getters.doneTodosCount // -> 1

computed: {
  doneTodosCount () { return this.$store.getters.doneTodosCount } } 

getters: {
  // ...
  getTodoById: (state) => (id) => { return state.todos.find(todo => todo.id === id) } } 

store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false } 

import { mapGetters } from 'vuex' export default { // ... computed: { // 使用对象展开运算符将 getter 混入 computed 对象中 ...mapGetters([ 'doneTodosCount', 'anotherGetter', // ... ]) } } 

...mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount` doneCount: 'doneTodosCount' })

const store = createStore({ state: { count: 1 }, mutations: { increment (state) { // 变更状态 state.count++ } } }) 

store.commit('increment') 

// ...
mutations: {
  increment (state, n) { state.count += n } } 

store.commit('increment', 10) 

// ...
mutations: {
  increment (state, payload) { state.count += payload.amount } } 

store.commit('increment', { amount: 10 }) 

store.commit({
  type: 'increment', amount: 10 }) 

mutations: {
  increment (state, payload) { state.count += payload.amount } } 

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION' 

// store.js
import { createStore } from 'vuex' import { SOME_MUTATION } from './mutation-types' const store = createStore({ state: { ... }, mutations: { // 我们可以使用 ES2015 风格的计算属性命名功能 // 来使用一个常量作为函数名 [SOME_MUTATION] (state) { // 修改 state } } }) 

mutations: {
  someMutation (state) { api.callAsyncMethod(() => { state.count++ }) } } 

import { mapMutations } from 'vuex' export default { // ... methods: { ...mapMutations([ 'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')` // `mapMutations` 也支持载荷： 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)` ]), ...mapMutations({ add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')` }) } }

<template>
  <button @click="increment({ amount: 10 })">{{ $store.state.count }}</button>
</template>
<script lang="ts">
import { mapMutations } from "vuex";

export default {
  methods: {
    ...mapMutations(["increment", "getOne"]),
  },
};
</script>
<style scoped>
.container {
  background: #def;
}
</style>

store.commit('increment') // 任何由 "increment" 导致的状态变更都应该在此刻完成。

const store = createStore({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } }) 

actions: {
  increment ({ commit }) { commit('increment') } } 

store.dispatch('increment') 

actions: {
  incrementAsync ({ commit }) { setTimeout(() => { commit('increment') }, 1000) } } 

// 以载荷形式分发
store.dispatch('incrementAsync', { amount: 10 }) // 以对象形式分发 store.dispatch({ type: 'incrementAsync', amount: 10 }) 

actions: {
  checkout ({ commit, state }, products) { // 把当前购物车的物品备份起来 const savedCartItems = [...state.cart.added] // 发出结账请求 // 然后乐观地清空购物车 commit(types.CHECKOUT_REQUEST) // 购物 API 接受一个成功回调和一个失败回调 shop.buyProducts( products, // 成功操作 () => commit(types.CHECKOUT_SUCCESS), // 失败操作 () => commit(types.CHECKOUT_FAILURE, savedCartItems) ) } } 

import { mapActions } from 'vuex' export default { // ... methods: { ...mapActions([ 'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')` // `mapActions` 也支持载荷： 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)` ]), ...mapActions({ add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')` }) } } 

actions: {
  actionA ({ commit }) { return new Promise((resolve, reject) => { setTimeout(() => { commit('someMutation') resolve() }, 1000) }) } } 

store.dispatch('actionA').then(() => { // ... }) 

actions: {
  // ...
  actionB ({ dispatch, commit }) { return dispatch('actionA').then(() => { commit('someOtherMutation') }) } } 

// 假设 getData() 和 getOtherData() 返回的是 Promise

actions: {
  async actionA ({ commit }) { commit('gotData', await getData()) }, async actionB ({ dispatch, commit }) { await dispatch('actionA') // 等待 actionA 完成 commit('gotOtherData', await getOtherData()) } } 

const moduleA = {
  state: () => ({ ... }), mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: () => ({ ... }), mutations: { ... }, actions: { ... } } const store = createStore({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> moduleA 的状态 store.state.b // -> moduleB 的状态

import {createStore} from 'vuex'

const M1={
    namespaced:true,
    state:{
        a:100
    },
    getters:{
        doubleA(state){
            return state.a*2;
        }
    },
    mutations:{
        add(state){
            state.a+=10;
        }
    },
    actions:{
        add({commit}){
            commit("add");
        }
    }
}

const M2={
    namespaced:true,
    state:{
        b:200
    },
    getters:{
        doubleB(state){
            return state.b*2;
        }
    },
    mutations:{
        plus(state){
            state.b+=20;
        }
    },
    actions:{
        plus({commit}){
            commit("plus");
        }
    }
}


export default createStore({
    //数据
    state:{
        count:100
    },
    mutations:{
        increment(state,payload){
            return state.count+=payload.amount;
        },
        getOne(){
            return "one";
        }
    },
    actions:{
        async increment({commit},payload){
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                   let result=commit("increment",payload);
                    resolve(result);
                }, 2000);
            });
        }
    },
    modules:{
        M1,M2
    }
});

CountA.vue

<template>
  <button @click="add({ amount: 200 })">{{ store.state.count }}</button>
  <hr />
  <button @click="store.dispatch('M1/add')">
    store.state.M1.a={{ store.state.M1.a }}
  </button>
  <hr />
  <button @click="store.dispatch('M2/plus')">
    store.state.M2.b={{ store.state.M2.b }}
  </button>
</template>
<script lang="ts">
import { useStore } from "vuex";

export default {
  setup() {
    const store = useStore();
    function add(payload) {
      store
        .dispatch({
          type: "increment",
          amount: 200,
        })
        .then((p) => {
          alert(p);
        });
    }
    return { store, add };
  },
  methods: {},
};
</script>
<style scoped>
.container {
  background: #def;
}
</style>

const moduleA = {
  state: () => ({ count: 0 }), mutations: { increment (state) { // 这里的 `state` 对象是模块的局部状态 state.count++ } }, getters: { doubleCount (state) { return state.count * 2 } } } 

const moduleA = {
  // ...
  actions: { incrementIfOddOnRootSum ({ state, commit, rootState }) { if ((state.count + rootState.count) % 2 === 1) { commit('increment') } } } } 

const moduleA = {
  // ...
  getters: { sumWithRootCount (state, getters, rootState) { return state.count + rootState.count } } } 

const store = createStore({ modules: { account: { namespaced: true, // 模块内容（module assets） state: () => ({ ... }), // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响 getters: { isAdmin () { ... } // -> getters['account/isAdmin'] }, actions: { login () { ... } // -> dispatch('account/login') }, mutations: { login () { ... } // -> commit('account/login') }, // 嵌套模块 modules: { // 继承父模块的命名空间 myPage: { state: () => ({ ... }), getters: { profile () { ... } // -> getters['account/profile'] } }, // 进一步嵌套命名空间 posts: { namespaced: true, state: () => ({ ... }), getters: { popular () { ... } // -> getters['account/posts/popular'] } } } } } }) 

modules: {
  foo: { namespaced: true, getters: { // 在这个模块的 getter 中，`getters` 被局部化了 // 你可以使用 getter 的第四个参数来调用 `rootGetters` someGetter (state, getters, rootState, rootGetters) { getters.someOtherGetter // -> 'foo/someOtherGetter' rootGetters.someOtherGetter // -> 'someOtherGetter' rootGetters['bar/someOtherGetter'] // -> 'bar/someOtherGetter' }, someOtherGetter: state => { ... } }, actions: { // 在这个模块中， dispatch 和 commit 也被局部化了 // 他们可以接受 `root` 属性以访问根 dispatch 或 commit someAction ({ dispatch, commit, getters, rootGetters }) { getters.someGetter // -> 'foo/someGetter' rootGetters.someGetter // -> 'someGetter' rootGetters['bar/someGetter'] // -> 'bar/someGetter' dispatch('someOtherAction') // -> 'foo/someOtherAction' dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction' commit('someMutation') // -> 'foo/someMutation' commit('someMutation', null, { root: true }) // -> 'someMutation' }, someOtherAction (ctx, payload) { ... } } } } 

{
  actions: {
    someOtherAction ({dispatch}) { dispatch('someAction') } }, modules: { foo: { namespaced: true, actions: { someAction: { root: true, handler (namespacedContext, payload) { ... } // -> 'someAction' } } } } } 

computed: {
  ...mapState({ a: state => state.some.nested.module.a, b: state => state.some.nested.module.b }), ...mapGetters([ 'some/nested/module/someGetter', // -> this['some/nested/module/someGetter'] 'some/nested/module/someOtherGetter', // -> this['some/nested/module/someOtherGetter'] ]) }, methods: { ...mapActions([ 'some/nested/module/foo', // -> this['some/nested/module/foo']() 'some/nested/module/bar' // -> this['some/nested/module/bar']() ]) } 

computed: {
  ...mapState('some/nested/module', { a: state => state.a, b: state => state.b }), ...mapGetters('some/nested/module', [ 'someGetter', // -> this.someGetter 'someOtherGetter', // -> this.someOtherGetter ]) }, methods: { ...mapActions('some/nested/module', [ 'foo', // -> this.foo() 'bar' // -> this.bar() ]) } 

import { createNamespacedHelpers } from 'vuex' const { mapState, mapActions } = createNamespacedHelpers('some/nested/module') export default { computed: { // 在 `some/nested/module` 中查找 ...mapState({ a: state => state.a, b: state => state.b }) }, methods: { // 在 `some/nested/module` 中查找 ...mapActions([ 'foo', 'bar' ]) } } 

// 通过插件的参数对象得到空间名称
// 然后返回 Vuex 插件函数
export function createPlugin (options = {}) { return function (store) { // 把空间名字添加到插件模块的类型（type）中去 const namespace = options.namespace || '' store.dispatch(namespace + 'pluginAction') } } 

import { createStore } from 'vuex' const store = createStore({ /* 选项 */ }) // 注册模块 `myModule` store.registerModule('myModule', { // ... }) // 注册嵌套模块 `nested/myModule` store.registerModule(['nested', 'myModule'], { // ... }) 

const MyReusableModule = {
  state: () => ({ foo: 'bar' }), // mutation、action 和 getter 等等... }