Vue状态管理vuex

概述

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

项目中安装vuex

npm install vuex -S

Helloworld

在项目的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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券