vuex怎么使用及入门

首先先安装vuex

cnpm i vuex -D

新建一个store.js的页面在src里面

在store中引入vue和xuex等如下

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
//state用来存储所以的状态和数据
let state = {
    count:0
}

// mutations是改变state状态的唯一方式
// mutations是同步函数，在mutations里面不能进行任何的异步操作，所以的异步操作全部放到actions里面
let mutations = {
    // 接受state作为第一个参数,要想改变state中的状态必传
    incCount(state,val){
        state.count = val;
    }
}

//actions和mutations类似,actions提交的是mutations,而不是直接变更状态,所有的异步全部写到actions里面
let actions = {
    // actions 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
    ation(context,val){
        context.commit('incCount',val)
    }
}

const store = new Vuex.Store({
    state,
    mutations,
    actions
})

// commit()是触发mutations的唯一方式，如果需要传递参数，有两种方式
// store.commit('incCount')
// 第一种方式
// store.commit('incCount',"我就是参数")//此方式只能携带一个参数
// 推荐使用第二种
// store.commit({
//     type:'incCount', //必须有个typ属性,且指向mutations中的函数
//     val1:"我是参数1",
//     val2:"我是参数2",
//     val3:"我是参数3"
// })
// 在其它页面想要提交mutations函数使用以下方式
// this.$store.commit({
//     type:'incCount',
//     val:'我是参数1'
// })

// dispatch()此函数是触发actions的唯一方式
// store.dispatch('ation','参数')//这里的参数需要先在actions中接收，在由actions传输给mutations
//推荐使用
// store.dispatch({
//     type:'ation',
//     val:'参数'
// })

// 在其它页面想要提交actions函数推荐使用以下方式
// this.$store.dispatch({
//     type:'ation',
//     val:'其他页面传递的参数'
// })

console.log(store.state.count)

// 将store暴露出去
export default store

在main.js中引入store文件，并注入到vue实例中

import Vue from 'vue'
import App from './App.vue'
import router from './router'

//引入暴露的store
import store from '@/store/store'


Vue.config.productionTip = false

new Vue({
  router,
  store,//注入到整个vue实例中
  render: h => h(App)
}).$mount('#app')

在页面中提交mutations和actions

<template>
  <div class="about">
    <h1 @click="btn_buttom()">about页面</h1>
  </div>
</template>

<script>
export default {
  methods:{
    btn_buttom(){
      // this.$store.commit({
      //   type:'incCount',
      //   val:'来自about的参数'
      // })

      this.$store.dispatch({
        type:'ation',
        val:'来自about的参数'
      })
      console.log(this.$store.state.count)
    }
  }
}
</script>

vuex怎么使用及入门

猜你喜欢