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 部分代码
<script>
import httpGet from '@/utils/http-util.js'
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
    name: 'login',
    data() {
        return {
            username: 'panda',
            passowrd: ''
        }
    },
    mounted() {
      // 第一种写法
      console.log('第一种写法 name:' + this.$store.state.name)
      console.log('第一种写法 number:' + this.$store.state.number)
      // 第二种写法
      console.log('第二种写法 name:' + this.name)
      console.log('第二种写法 number:' + this.number)
      // 第三种写法
      console.log('第三种写法 name:' + this.getName)
      console.log('第三种写法 number:' + this.getNumber)

    //   this.$store.commit('setName', { name: '李四' });
    //   this.$store.commit('setNumber', { number: 666 });
        this.setNumber({number: 10})
        this.setName({name: '李四'})

      console.log('第三种写法1 name:' + this.getName)
      console.log('第三种写法1 number:' + this.getNumber)

      setTimeout(() => {
        console.log('第四种写法 name:' + this.getName)
        console.log('第四种写法 number:' + this.getNumber)
      }, 2000)
    },
    methods: {
        login() {
            console.log('login username: ' + this.username + ', pwd: ' + this.passowrd)
            sessionStorage.setItem('username', this.username)
            // httpGet('/api')
            httpGet('/api/user/get/1')
            this.$router.push({path: '/dashboard'})
        },
        // 注意mutations放在methods中
        // ...mapMutations(['setName', 'setNumber']),
        ...mapActions(['setName', 'setNumber'])
        // 以上方法有冲突，但是不会报错，避免的方式就是用不同的名字
    },
    computed: {
        // 第二种写法
        ...mapState(['name', 'number']),
        // 第三种写法
        ...mapGetters(['getName', 'getNumber'])    
    }
}
</script>

4.参考

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

5.代码下载

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