Vuex 的基本使用

Vuex 的基本使用

一下是在 store 文件夹

//-------- store/index.js 
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
Vue.use(Vuex);
export default new Vuex.Store({
  state,
  mutations
})

//------- store/mutations.js  vuex的方法 主要功能是改变vuex的值
export default {
  increment(state) {
    state.count++;
  },
  hashData(state, data) {
    state.hash = data;
  }
}

//-------- store/state.js  vuex定义属性的文件 
export default  {
  count: 0,
  isT: true,
  hash: window.location.hash.split("#")[1] || '/'
}

这里是配置vuex挂载到项目中

//---------- main.js
import store from './store' // vuex


new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

页面中使用

// 页面中使用
import { mapState } from "vuex";
// 计算属性中
computed: {
    ...mapState(["count"]), // 导入要使用的变量
  },
  

// 具体使用
  <h2>{{ count }}</h2>
// this.count

最后

vuex module 的使用 https://blog.csdn.net/dwp_wz/article/details/113374866

最后的最后 点赞 收藏 不吃亏