006-vuex

vuex安装：

npm install vuex --save

vuex配置,store导出：

新建index.js

// vuex配置
import Vue from 'vue';
import Vuex from 'vuex';
import order from "./moduls/order"
Vue.use(Vuex);



// 定义state  state是一个对象
const state = {
    isLogin: false,
    isOpen: false,
    msg: 'what'
}

// 定义getter
const getters = {
    /*定义获取isLogin的getter  getter是一个方法 它会接收state这个对象
     * 给getter对象添加 isLogin 属性 ， 这个属性是一个(函数)方法，这个方法
     * 返回state里isLogin 的属性值
     *
     */
    isLogin: state => state.isLogin,
    isOpen: (state) => {
        return state.isOpen;
    }

}
// mutation
const mutations = {
    /* 定义一个用来修改isLogin的mutation的方法
     * 他接收两个参数
     *  state   指的是上面定义的state对象
     *  payload 要修改的新值
     */
    changeLogin(state,payload){
        state.isLogin = payload;
    },

    changeisOpen(state,payload){
        state.isOpen = payload;
    }
}
// actions，用来调用mutations里的方法
const actions = {
   /*
    * 定义一个action方法(函数)，用来commit（提交）mutation里的changeLogin
    *
    */
   //随便起名字，最好语义化，可以与mutation里的方法同名
   actionChangeLogin(state,payload){
       //state调用commit()方法
    //    第一个参数是你要提交的mutation的名称，第二个参数是你要修改的值
        state.commit('changLogin',payload);
        /*
         *  actions 里的 actionChangeLogin 被调用，传进你需要调用的mutation方法
         *  和你要修改的值，然后mutation里 的函数接收传进来的值，修改state里的属性的值
         */
   }
}
const moduls ={
    order
}
//新建个store对象
const store= new Vue.store({
    state:state,
    mutations,
    getters,
    actions
})


//导出 store
export default store ;

vuex 的store 的导入：

新建main.js或者在原有main.js文件导入添加

import Vue from 'vue';
import store from './index'

new Vue({
    store,
    render: h=>(App)
}).$mount('#app');

从store里取值

1 。直接取

13.jpg

5 。通过getter取值

14.jpg

6 。修改store里的值

15.jpg

7. Vuex持久化

安装 `vuex-persistedstate`

然后在index.js 导入`vuex-persistedstate`

  import VuexPersistedstate from 'vuex-persistedstate';
//
const plugins= [
        VuexPersistedstate()
    ];

const store= new Vue.store({
    plugins
})

8. moduls 模块化

moduls 是vuex的第五个要点，在state里的状态过多的时候，通过moduls来拆分

在store 文件夹下新建一个moduls文件夹，文件夹存各种不同组件存放的状态。比如存订单状态，那就新建一个order.js文件(名字自取，随意)

//========    order.js     =============
export default {
    // 存放order 的状态
    state: {
        orderInfo: {
            id: "asdfasdfasdfasdf"
        }
    },
    getters: {
        orderInfo: state=>state.orderInfo
    },
    mutations: {
        updateOrderInfo(state,payload) {
            state.orderInfo = payload;
        }
    },
    actions:{
    change_orderInfo(state,payload){
        state.commit("updateOrderInfo",payload)
        }
    }
}

在`index.js`导入`order.js`

 import order from "./moduls/order";

 //在modouls 里添加order属性
const moduls = {
    order
  }

访问`moduls`里存的状态

<template>

</template>
<script>
    import { mapGetters } from "vuex";
    export default{
    computed:{
      orderInfo(){
        //moduls 里  order  就是 state 里的属性 
          return  this.$store.state.order
      }
    }
}
</script>

order.js 里getters/mutations/actions相当于 index.js 里的getters/mutations/actions
可以直接通过this.$store.commit("changeOrderInfo","777")
改变orderInfo的值

最后编辑于：2019.08.27 18:47:32