vuex在项目中的用法

 首页要知道vue2项目中，要下载vuex为3.几的版本，而vue3项目要下载vuex为4.几的版本

下载 npm install vuex@版本号

新建一个store文件夹

建一个index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const actions = {
    //对象的写法，此时的传参方式通过@click="changeVal('bbbbb')"
    ...mapActions({
        changeVal:'changeCurVal'
   }),
    //数组的方式，不过这种方式就是调用名和actions里的方法名要一样
    ...mapState(['curVal'])
  changeCurVal(content,value){
    content.commit('CHANGECURVAL',value)
  }
}

const mutations = {

    

  CHANGECURVAL(state,value){
    state.curVal = value
  }
}

const state = {
  curVal:'aaaa'
}

export default new Vuex.Store({
  actions,
  mutations,
  state
})

然后在main.js引入store

import store from './store'

new Vue({

  store,   //重点

  render: h => h(App),

}).$mount('#app')

然后在A组件是就可以正常使用和操作store了

<template>
  <div>
    当前值：{{curVal}}
    <button @click="changeVal">修改当前的值同时也要在B组件中显示</button>
  </div>
</template>

<script>
  export default{
    name:'A',
    computed:{
        //对象的写法
        ...mapState({
            curVal:state => state.curVal
        }),
        //数组的写法
        ...mapState(['curVal'])，
       //普通的写法
      curVal(){
        return this.$store.state.curVal
      }
       
    },
    methods:{
      //对象的写法，此时的传参方式通过@click="changeVal('bbbbb')"
    ...mapActions({
        changeVal:'changeCurVal'
   }),
    //数组的方式，不过这种方式就是调用名和actions里的方法名要一样
    ...mapState(['curVal'])
    //普通的写法
      changeVal(){
        this.$store.dispatch('changeCurVal','bbbb')
      }
    }
  }
</script>

<style>

</style>

然后在B组件也可以使用和操作store

<template>
  <div>
    当前值:{{curVal}}
    <button @click="changeVal">修改当前值并且在A组件显示</button>
  </div>
</template>

<script>
  export default{
    name:'B',
    computed:{
       //对象的写法
        ...mapState({
            curVal:state => state.curVal
        }),
        //数组的写法
        ...mapState(['curVal'])，
      //普通的写法
      curVal(){
        return this.$store.state.curVal
      },
      
    },
    methods:{
        changeVal(){
          this.$store.dispatch('changeCurVal','ccccc')
        }
        
      }
  }
</script>

<style>

</style>