6. Vue 引入vuex store

0.开始之前

如果打算开发一个大型的单页应用，使用vuex比较合适。它可以让页面中多个组件共享变量，即单页面中全局的变量。
如果应用比较简单，可以不考虑使用vuex来管理全局变量。
注意，vuex在单页应用中生效，如果跳转到其他页面，vuex会失效（不会保存上一个页面的变量信息）。
这里注意版本对应关系 vue2/vuex3，vue3/vuex4。

1.vuex store安装

npm install vuex@3 --save

这里指定版本vuex3

2.vuex 使用

推荐目录结构，在src目录下新建store目录，新建index.js。

# index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        name: '张三',
        number: 0
    },
    getters: {
        getName(state) {
            return 'third ' + state.name
        },
        getNumber(state) {
            return 'third ' + state.number
        }
    },
    mutations: {
        setName(state, payload) {
          state.name = payload.name
        },
        setNumber(state, payload) {
          state.number = payload.number
        }
    },
    actions: {
        setName(content, payload) {
            return new Promise(resolve => {
                setTimeout(() => {
                    content.commit('setName', {name: payload.name})
                    resolve()
                }, 1000)
            })
        },
        setNumber(content, payload) {
            return new Promise(resolve => {
                setTimeout(() => {
                    content.commit('setNumber', {number: payload.number})
                    resolve()
                }, 2000)
            })
        }
    }
})

export default store

在main.js中引用

# main.js 部分代码
import store from './store'

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

3.测试

# login.vue 部分代码

4.参考

https://tehub.com/a/3EvY5cOxsu
https://juejin.cn/post/6844903949586153480

5.代码下载

https://gitee.com/animal-fox_admin/learn-vue-web
branch：lesson4