vuex怎么使用

最近在研究vue,其中感觉比较头痛的就是vuex了,引用官网(https://vuex.vuejs.org/zh/guide/)的话:

"每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。"

如果你是第一次使用vuex来做状态管理的话,可能会有点懵,多用几次就熟练了,没你想象的那么难.根据网上其他大神的分享,加上自己亲自实现,总结如下:
 

1.使用vuex的话,首先是vuex的安装,nmp install vuex --save

2.建立文件目录

state.js示例:

getters.js示例:

mutation-type.js示例(mutation.js的函数名都放在这里,名字推荐大写):

mutation.js示例:

actions.js示例:

index.js示例:

最后,将store实例挂在到main.js上

modules这里分了一个模块,示例如下:

以上是vuex的整体文件架构,那到底该如何使用呢?

使用mapGetters、mapActions、mapMutations，然后通过methods和computed的方式去调用这些变量或函数，如下：

login.vue组件中提交数据(提交name或者age的值)
<script>
  import {mapGetters, mapMutations, mapActions} from 'vuex';
  export default {
    data () {
      return {
        name:'hesha',
        age:'20'
      }
    },
    computed: {
     /* ...mapGetters([
        'name',
        'age',
        'other'
      ]),*/
    
    },
    created(){
      this.setName('hesha');//
      this.setAge(this.age);//
      console.log(this.age);
    },
    methods: {
     /* setCurrentName(name){
        this.setName(name);
      },
      setCurrentAge(age){
        this.setAge(age);
      },*/
      ...mapMutations({
        setName: 'SET_NAME',
        setAge: 'SET_AGE'
      })
    }
  }
</script>

 

index.vue组件中获取数据(提交name或者age的值)

 

到这里关于vuex使用的整个流程就是这样了,温馨提示:

...mapGetters()前面三个点的这种写法就是为了能与methods\computed方法一起使用,如果报错,可自行百度找解决方案,应该安装个插件就可以了,这里不过多解释