前端开发学习路线

1.Vuex的如何使用

1.先创建一个store文件夹/里面创建一个index.js
2.在 index.js 导入Vue和Vuex导完Vuex记得Vue.use(Vuex)一下
3.导入一个新的Vuex实例export default new Vuex.Store({})
4.index.js代码如下直接c+v
   1-state:写我们的数据类似于vue中的data
   2-mutations写方法类似于vue中的methods
   3-actions写异步操作方法定时器等。。
   4-modules是一个小的模块化大白话讲就是小的Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    num:0,
    tableData: [{
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    }]
  },
  mutations: {
    // 修改num数据
    setcount(state){
      state.num++
    },
    // 弹窗
    setalert(){
      alert('这是VueX的一个方法')
    }
  },
  actions: {
  },
  modules: {
  }
});

5.在min.js入口文件里面导入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')

6.在我们需要共享Vuex状态的组件里面导入mapState,mapMutations
//在计算属性里面展开...mapState
//在methods里面展开...mapMutations
import{mapState,mapMutations} from 'vuex'
<template>
  <div>
    <h1>{
   
   { num }}</h1>
    <button @click="setcount">修改Vuex的数据</button>
    <button @click="setalert" style="background: pink">获取Vuex的方法</button>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  computed: {
    ...mapState(["num"]),
  },
  methods: {
    ...mapMutations(["setcount", "setalert"]),
  },
};
</script>
<style></style>