vuex 笔记

状态管理，类似后端的session，可以用来记录状态，一些需要验证类的数据

 

//安装
npm install vuex --save
//引入
import Vuex from 'vuex';
Vue.use(Vuex);
//调用
const store = new Vuex.Store({})
const app = new Vue({
    el: '#app',
    router,
    store,
    render: h => {
        return h(App)
    }
})

 

state： 存放状态， 可以直接读取，但是不能修改，如果需要修改，只能通过调用mutations 里面的方法

mutations： state成员操作

getters： 加工state成员给外界

actions： 异步操作，在vue文件中，通过使用actions 来调用mutations，从而修改state的状态

modules： 模块化状态管理

 

vue 在xx.vue中修改vuex  state 的值方法

list.vue
    mounted(){
      //初始化时通过Vuex actions获取商品列表信息
      this.$store.dispatch('getProductList');
    }


index.js /vuex.js
    state: {
        //商品列表信息
        productList: [],
    },
    mutations: {
        //添加商品列表
        setProductList(state, data){
            state.productList = data;
        }
    },
    actions: {
        //异步请求商品列表，暂且使用setTimeout
        getProductList(context){
            setTimeout(() => {
                context.commit('setProductList', product_data)
            }, 500);
        },
    }

vue 中通过vuex 的actions控制state 的productList，调用方法

this.$store.dispatch('getProductList');

context.commit('setProductList', product_data)

//调用setProductList 方法，product_data 为 第二个参数