vuex的创建和使用

1.下载vuex包

npm i vuex --s

2.单独写vuex  在main.js中引入该文件

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

// 调用vuex插件
Vue.use(Vuex)

// 导出用vuex创建好的仓库
export default new Vuex.Store({
  // 存储数据的地方
  state: {
    // 存储的数据
    num: ''
  },
  // 修改数据的地方(外层)
  actions: {
    // 组建需改传递的方法名,两个参数，第二个为传递的数据
    xgChange(cts, num) {
      //通过修改commit方法修改mutations的值
      cts.commit('xgChange', num)
    }
  },
  //修改数据（实际仓库）
  mutations: {
    xgChange(state, num) {
      //修改state的数据
      state.num = num
    }
  }
})

 

3.在main.js中引入并把他传入创建的根vue中

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import './assets/css/base.css'


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

4.在需要使用的组件中直接使用

<!-- 在需要使用的地方直接使用 -->
<span>{{this.$store.state.num}}</span>

 5.修改vuex的值

    hasChange(num) {
      // 用户点击把修改了的值传递给vuex
      this.$store.dispatch('xgChange',num)
    }

 

转载于:https://www.cnblogs.com/wjsy/p/10299794.html