Vue引入使用

Vuex3 和 Vue2.x

src/store/index.js

import Vue from 'vue' // 2、引入vue
import Vuex from 'vuex'
Vue.use(Vuex)// 2、vue 使用 Vuex
export default new Vuex.Store({
  state: {
    // 1、定义的Vuex公共变量（状态）
    a:100,
    b:"bb"
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

Vuex4 和 Vue3.x

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'
// 5、然后在 main.js中引入本文件的路径
import store from './store/index.js'
// 6、最后在 main.js 中.use(vuex) 让APP应用使用vuex
createApp(App)
  .use(router)
  .use(store)
  .mount('#app');

========================

使用数据

其他组件页面可以直接使用，通过vue内置的$store 来调用

直接简单使用

Vue 2.x 或 Vue3 选项API

<template>
  <div id="app">
    test1
    <!-- 通过这样的方式使用 -->
    {{$store.state.a}}
    <!-- 也可以通过computed计算属性使用 -->
    {{storeData}}
  </div>
</template>
<script>
export default {
  computed:{
      storeData(){
        return this.$store.state.a
    }
  },
  data() {
    return {
      data: {}
    };
  },
};
</script>

Vue3 组合API

<template>
  <div>{{$store.state.a}} 可以直接获取</div>
    <div>{{b}} 也可以通过变量方式（推荐）</div>
</template>
<script>
//7、在要使用vuex的.vue文件内，引入vuex的useStore方法
import { useStore } from "vuex";
import { computed } from 'vue';
export default {
    setup() {
      //8、在setup()里面创建vuex实例
    const store = useStore()
    //9、通过computed使用，才是响应式的
    let a = computed(()=>{
        return store.state.a
    });
    let b = computed(()=>{
        return store.state.b
    });
    return { 
      a,
      b
    }
  }
}
</script>

mapState 获取多个状态

Vue 2.x 或 Vue3 选项API

<template>
  <div>
    <!-- 第一种：数组 -->
    {{a}}
    <!-- 第二种：对象 -->
    {{sB}}
  </div>
</template>
<script>
import {mapState} from "vuex"
export default {
  computed:{
    // mapState有两种方式，
    // 第一种参数是数组，数组元素就是数据仓库变量的名字
    // mapState会返回一个对象，对象每个参数都是一个函数，可以通过解构的方法，提取对象的内容，变成简单的变量
      ...mapState(["a","b"]),  
    // 第二种参数是对象，可以自定义要展示的名字
    ...mapState({
        sA:state => state.a,
      sB:state => state.b,
    }),  
    // 相当于
    sA(){
        return this.$store.state.a
    },
    sB(){
        return this.$store.state.b
    },
  },
  data() {
    return {
      data: {}
    };
  },
};
</script>

Vue3 组合API

简单的，就是多写几个上面介绍的vue3组合api的就可以了，然后return出去。

如果不想写那么多个，官方没有很好的方法直接把mapState放在setup里面使用。

需要我们自己通过js操作一下，下面是老师CoderWHY的建议：

<template>
  <div>{{$store.state.a}} 可以直接获取</div>
    <div>{{b}} 也可以通过变量方式（推荐）</div>
</template>
<script>
import { useStore , mapState } from "vuex";
import { computed } from 'vue';
export default {
    setup() {
        // 1、引入vuex的hook函数
    const store = useStore()
    // 2、使用mapState 获取数据仓库的变量
    /* storeState = {
         a:function(){return this.$store.state.a},
         b:function(){return this.$store.state.b},
       }
    */
    const storeState = mapState(["a","b"])
    // 3、通过js处理mapState
    const storeObj = {}
    /*
      Object.keys(storeState) = [a,b]
    */
    Object.keys(storeState).forEach(key => {
          /*
            fn = function(){return this.$store.state.a} , 在setup里面，this是undefined。
          函数().bind(对象)是给函数绑定一个对象，让函数的this指向这个对象。
          现在给fn绑定一个对象{$store:store},store就是上面useStore获得的对象。
          因此：fn = function(){return store.state.a}
        */
            const fn = storeState[key].bind({$store:store})
          /*
            storeObj[a] = storeObj.a = computed(function(){return store.state.a})
        */
          storeObj[key] = computed(fn)
    })
    return { 
      /*
          相当于：
        a, // a 为 computed(function(){return store.state.a})
        b, // b 为 computed(function(){return store.state.b})
      */
      ...storeObj
    }
  }
}
</script>

中间转化的过程可以封装成一个hook函数，在要使用的组件中，引入，然后直接使用即可。