vuex学习笔记

什么是vuex?

vuex是一个专门为vue.js设计的集中式状态管理架构。我个人理解就是当你需要在vue里面定义一个类似于全局变量的东西，你还想让它是响应式的，那么就可以考虑用vuex啦。一句话描述就是data中需要共用的属性。

引入vuex(默认是你已经用vue-cli搭建好项目了)

1.npm install vuex --save
注意 “--save”不能丢，因为这个包在生产环境中还要用到。
2.在src目录下新建一个文件夹，并在文件夹下面新建一个store.js文件，文件中引入vue与vuex。

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

3.使用vuex,引用之后用Vue.use进行引用。

Vue.use(Vuex);

通过这三步操作，vuex就算引入成功了。
4.在main.js中引入新建的vuex文件。

import store from './store/store'

5.实例化Vuex对象时加入store对象：

new Vue({
  el: '#app',
  router,
  store,//使用store
  components: { App },
  template: '<App/>'
})

玩一哈

1.在store.js文件里增加常量对象state.

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
//常量对象
const state={
  count:1,
  list:[]
}
//用来改变state的方法。
const mutations={
  add(state,n){
    state.count+=n;
  },
  reduce(state,n){
    state.count-=n;
  },
  listChange(state,n,m){
    state.list[n]=m;
  }
}
//用export default 封装代码，让外部可以引用。
export  default  new Vuex.Store({
  state,
  mutations
});

随便新建一个组件。

<template>
  <div>
    <h2>{{msg}}</h2>
    <hr/>
    <h3>{{$store.state.count}}</h3>
    <div>
      <button @click="$store.commit('add',10)">+</button>
      <button @click="$store.commit('reduce',10)">-</button>
    </div>
  </div>
</template>

<script>
  import store from '../store/store'
    export default {
        name: "count",
      data(){
          return{
            msg:'Hello Vuex'
          }
      },
      store
    }
</script>

<style scoped>

</style>

这里备注一下：

$store.commit('add',10)//第二个是要传的参数。如果有多个参数需要组织到对象里面。也就是第二个参数是个对象。

eg:

this.$store.commit('curDetailStore',{num:type,n: detailData});

//store.js
 curDetailStore(state,obj){
    state.curDetail[obj.num]=obj.n
  }