vuex

1、教程 ： https://www.cnblogs.com/liningstyle/p/8335129.html  或  https://vuex.vuejs.org/zh/guide/（官网）

　  项目练习代码：https://github.com/kevin3623/Vuex

　（个人）体会：vuex的明显一个作用就是页面间数据变动是同步的。比如，一个页面中有显示支付银行卡的卡号好，还有选择银行卡的按钮。点击选择银行卡的按钮，

　　要跳到另外的一个页面中去选择。选好后，跳回来(回退)，如果是用vuex的话，之前的页面显示的银行卡号会同步为自己选择的银行卡号。

　　不然的话就需要先存了缓存(本地存储，或公共变量中)，然后在相应的页面中去取。比较麻烦。

2、vuex的引入，和目录结构类似  rooter(路由)：

rooter中index.js  和 vuex(store)中的index.js文件都是引入相应的插件，和设置相应的路由数据 或 vuex数据。

但是 路由 的数据，是一个类似表的形式（key / val），所以都放在了一个js文件，管理不会乱，还是很清晰的。vuex的数据，每一个组件文件都有很多的数据，如果把所有的数据都放在一个文件中，就会很不好管理。

所以可以通过一个js文件管理一个组件的vuex数据(vuex文件名和组件文件名对应起来)。这样管理的数据就很清晰。      （其实本地存储就类似于把所有的数据都放在一个文件了，管理起来比较容易乱）

// main.js
import Vue from 'vue'
import App from './App'
import router from './router' // 路径是目录的话，路径指向的是router目录下的index.js/index.vue文件
import store from './store' // 路径是目录的话，路径指向的是router目录下的index.js/index.vue文件

Vue.config.productionTip = false

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

// vuex目录下的index.js
import Vue from 'vue'
import vuex from 'vuex'
import HeadeStore from './heade'
import ContentStore from './content' // 引入content.js
Vue.use(vuex)
export default new vuex.Store({
  // state: {
  //   count: 0
  // }
  modules: {
    heade: HeadeStore,
    content: ContentStore
  }
})

// heade.js 同理 content.js也是一样的
export default {
  state: {
    count: 0 // 将需要缓存的数据，放在vuex中。如这里的count
  }
}

这样  count 值就可以在所有组件中使用了。（数据的使用，无非就是 增删改查，上面已经完成了增，一般不会去掉这个字段，即删的操作）

剩下的操作就是  获取和修改  了。

3、获取 store 中的数据

// html 中的使用

<div>{{$store.state.content.count}}</div>

4、修改 store 中的数据。 https://segmentfault.com/a/1190000012881956

 　 注：不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。

5、Vuex的使用详解（store state mutations） ： https://www.jianshu.com/p/395c014a6a00

     注：可以一个mutations方法中同时保存多个state变量。（传递过来的参数是一个对象）

  mutations: {
    changeCount (state, val) { // 一个mutation 方法，同时改变多个state变量
      if (val.count) {
        state.count = val.count
      }
      if (val.title) {
        state.title = val.title
      }
    },
    changeTitel (state, val) {
      state.number = val
    }
  },

View Code

 

---

视频 听课笔记

1、mutations是唯一一个可以改变vuex状态的方法集。

 

转载于:https://www.cnblogs.com/wfblog/p/9936562.html