Vue状态管理vuex

我会带着你远行 2024-04-20 08:34 1阅读 0赞

官方网站：https://vuex.vuejs.org/zh/

项目中安装vuex

npm install vuex -S

在项目的src目录下新建一个目录store，在该目录下新建一个index.js文件，我们用来创建vuex实例，然后在该文件中引入vue和vuex，创建Vuex.Store实例保存到变量store中，最后使用export default导出store：

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
    
      },
      mutations: {
    
      },
      actions: {
    
      }
    })

在main.js文件中引入该文件，在文件里面添加 import store from ‘./store’;，再在vue实例全局引入store对象；

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    
    Vue.config.productionTip = false
    
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

## State ##

vuex中的数据源，我们需要保存的数据就保存在这里，可以在页面通过 this.$store.state来获取我们定义的数据；

创建store目录 在新创建的store目录下创建index.js

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
        count: 0,
        num: 1
      },
      mutations: {
        increment(state, num) {
          state.count++
          state.num = num
        }
      },
      actions: {
        inc({commit}, obj) {
          commit('increment', obj)
        }
      }
    })

在main.js 导入store

import store from './store'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      store,
      components: { App },
      template: '<App/>'
    })

## 设置数据和获取数据 ##

<template>
    <div>
      {
       {msg}}
      <button @click="change">change</button>
    </div>
    </template>
    
    <script>
        export default {
            name: "HelloVuex",
          data(){
              return{
                msg:234
              }
          },
          methods:{
              change(){
                this.$store.dispatch('inc',100)
                this.msg = this.$store.state.num;
              }
          }
        }
    </script>