仅一篇vuex使用说明手册-一一网

写在最前——如果你是初学者

记住一句话：vuex是个存数据的仓库。使用场景是：我们可以在任何地方可以拿出来使用，可以改变它再放进去，想用的时候然后再拿出来使用，如此。

附上官网链接：很久以前我也不喜欢看官方文档，包括现在。

具体使用场景：开发过程中，我们经常会遇到一个状态可能会在多个组件之间使用，比如我们在做项目时使用到的用户的信息，什么昵称、头像这些，这些信息会在不同的组件用到，一旦改变这些状态，我们希望其他组件也跟随变化，比如用户充值了100元，或者改变了昵称，所以这个时候就需要状态管理模式来集中管理，关于Vuex的详细介绍可以移步到官网。

一、使用vuex前提：

已安装vuex依赖：npm install –save vuex
首先在src文件夹下创建store文件夹，在store文件下创建index.js文件，写入如下code：

import Vuex from 'vuex'; //引入vuex
Vue.use(Vuex) //使用vuex

export default new Vuex.Store({
    state: { 
        // state 类似 data
        //这里面写入数据
    },
    mutations:{ 
        // mutations 类似methods
        // 写方法对数据做出更改(同步操作)
    },
    getters:{ 
        // getters 类似 computed 
        // 在这里面写个方法
    },
    actions:{
        // actions 类似methods
        // 写方法对数据做出更改(异步操作)
    }
})

export default store
复制代码

在入口文件main.js下引入vuex并暴露出来

//main.js内部对store.js的配置
import store from '"@/store/index.js' 

new Vue({
  el: '#app',
  router,
  store,//并暴露出来
  render: h => h(App)
})
复制代码

写在中间———虽然你还不是很懂vuex，但是你已经会配置并且成功一半

二、数据的仓库state和工具人mutations

简单使用vuex,工具人把state拿出来改变它的状态

//先在vuex里面定义一个data
export default new Vuex.Store({
    state: { 
        count:0
    },
    mutations:{ 
       increment(state) { // 变更状态的方法
          state.count++; 
       }
    }
})
复制代码

第一种使用mutations的方式：this.$store.commit()

//在组件里面拿出来并赋值给temp
const temp = this.$store.state.count 

//改变他并放回去,以commit(type,[payload])的形式提交，官方称此为以载荷形式提交。
this.$store.commit('increment',temp) 

//此时已经改变了count的状态，下次再拉出来值为1
console.log(this.$store.state.count)->1

复制代码

第二种使用mutations的方式：辅助函数————mapState

这个方法很重要也很实用，有时候需要获取多个状态，但是使用计算属性会调用多次，显得麻烦，这里借助mapState方法来获取state。使用mapState需要引入该方法

//在使用组件中引入
import { mapState } from 'vuex';
复制代码

//使用了展开运算符...， 然后就可以在方法中直接this.count获取状态
computed: {
  // 返回多个你可以这样写...mapState(['count', 'firstName', 'lastName'])
  ...mapState(['count'])
},

复制代码

三、包装器Getter和辅助函数mapGetters

getter相当于vue计算属性，只对state中的数据进行包装形成新的数据，不会修改原数据。当state中的数据变化时，getter中的数据也发生变化，响应式的

export default new Vuex.Store({
  state: {
    count:0
  },
  getters: {
    showCount: state => {
        return '当前count为' + state.count + '!'
    }  
  }
});

复制代码

第一种使用getters的方式：

//也可以直接在插值表达式中用
this.$store.getters.名称
复制代码

第二种使用getters的方式：

//组件中使用
import { mapGetters } from 'vuex'

computed:{
    ...mapGetters(['showCount'])
}
复制代码

四、mutations派生的兄弟：acticons和mapActions

actions是异步操作vuex里面的数据，不能单独像mutations一样直接变更数据状态，必须通过mutation里面的方法间接改变数据的状态

第一种触发actions的方式： this.$store.dispatch()

//vuex
export default new Vuex.Store({
    state: { 
        count:0
    },
    mutations:{ 
       increment(state) { // 变更状态的方法
          state.count++; 
       }
    },
    actions:{
        addAsync(context,step){
            //引用mutations中的方法，step是接收的参数
            context.commit('increment',step)
        }
    }
})
复制代码

//组件中触发action
methods:{
    handle(){
        //调用dispatch函数，触发时携带参数
        this.$store.dispatch('addAsync',5)
    }
}

复制代码

第二种触发action的方式：将指定的action函数，映射为当前组件的methods函数

//vuex内容就不写了，跟上面一致
<script>
 import {mapActions} from 'vuex'
 
 ...//这里省略了data喔
 
 methods:{
    //映射为内部函数
    ...mapActions(['addAsync']),
    //某个按钮的点击事件
    btnHandle(){
        //直接使用；相当于调用了vuex中actions里面的addAsync方法，该方法又调用了mutations中的increment方法
        this.addAsync()
    }
 }
 
 
</script>
复制代码