Vue中的vuex

Vuex的介绍：

vuex其实就是vue官⽅给我们提供的⼀个状态管理⼯具,

通过vuex我们可以组件之间数据共享的问题.

  vuex并不是vue的内置工具；而是一个插件；需要安装，不过vue的框架已经替我们安装了

1. 安装： npm install vuex --save

2.  新建一个js文件：

   import { createStore } from 'vuex'
   
   export default createStore({
     state: {
     },
     getters: {
     },
     mutations: {
     },
     actions: {
     },
     modules: {
     }
   })
   

3.  在main.js内引入 

   import router from 'router'        //引入
   
   .use(router)                       //通过use挂载

     注意点： vuex并不是适合所有的项目；只适合大型的项目

vuex⼀共有5⼤核⼼:

分别是state,getters,mutations,actions和modules

• state⾥⾯保存的是状态,也可以理解为是数组
• getters他们⽤来获取state⾥⾯的状态,并且可以对state的数据进⾏处理之后在返回,有点类似于vue的计算属性
• mutations他的作⽤主要是⽤来修改state⾥⾯的数据,不过在mutations⾥⾯只能进⾏同步的操作
• actions也可以去改变 state的状态,不过在actions⾥⾯定义的⽅法可以进⾏异步操作
• modules进⾏模块化的处理,将多个状态抽离到对应js⽂件⾥⾯,最后在modules进⾏合并

组件⾥⾯调⽤五⼤核⼼的属性和⽅法：

Vue2:

• 获取state⾥⾯的状态,可以通过this.$store.state来进行获取
• 调用gettres里面的方法,可以通过this.$store.getter来进行调用
• 调用mutation里面的方法,需要使用this.$store.commit来触发
• 调⽤actions⾥⾯的⽅法,⼀般通过this.$store.dispacth来进⾏触发

Vue2除了这种⽅式以外,还可以通过辅助函数的⽅式来进⾏调⽤和触发
可以用对象的方式和数组的方式

// 值的映射必须写在 计算属性内 
//mapState
//mapGetter
computed: {
   ...mapState([]),
   ...mapGetters({}),
},

// 方法的映射必须写在 methods内
//mapMutation
//mapAction
methods: {
 method() {
    // 辅助函数的写法
    this.'方法名'('里面是要传入的值');
  },
  ...mapMutations([]),
  ...mapActions({}),
},

Vue3:

vue3需要引入(vue3里面没有辅助函数了)

<script>
    import { useStore } from 'vuex'
    export default {
        const store = useStore()
        // 获取state⾥⾯的状态,可以通过store.state来进行获取
        // 调用gettres里面的方法,可以通过store.getter来进行调用
        // 调用mutation里面的方法,需要使用store.commit来触发
        // 调⽤actions⾥⾯的⽅法,⼀般通过store.dispacth来进⾏触发
    }
</script>

以上只是个人的理解：

详细请参考：Vue.js (vuejs.org)   Vue的官网