vue中安装及使用vuex

安装:

npm i vuex

调试vuex的谷歌插件

vue.js devtools

新建文件store/index.js  

import vuex from 'vuex';
import Vue from 'vue';
import channels from "./channels";
//1.安装
Vue.use(vuex)
var store = new vuex.Store({    //仓库对象
//2.配置
　　modules:{
　　　　channels
　　}
})

export default store;

使用：main.js

import store form './store'

new Vue({
   store 
})

新建：store/channels.js   如何改动仓库数据（改动数据必须提教mutation）

export default {
  namespaced: true,//开启命名空间
  state:{
        data: [],
        isLoading: false, 
    }
　mutation：{
　　//state :原来的状态
   //payload： 负荷 需要传的值
　　setIsLoading（state，payload）
　　　　state.isLoading = payload
　　},
　　setData(state,payload){
　　　　state,data = payload
　　}
　actions：{            //有副作用的操作一部操作
　　async fetchDate（context）{
　　　　　　//设置isLoading为true
　　　　　　context.commmit("setIsLoading",true)
　　　　　　var channels = await getxxx（）
　　　　　　context.commit('setData',channels)

　　　　　　coontext.commit("setIsLoading",false)
　　}     

　}
}    

组件：login.vue

如何在组件中使用store中的数据 及 更改

第一种写法获取store属性：

<templet>
  
</templet>
<script>
export default{
    computed:{
        isLoading(){
            return this.$store.state.channels.isLoading
        }
    }
}
</script>        

第二种辅助函数

<templet>
  
</templet>
<script>
import {mapState} from 'vuex'
export default{
   computed:mapStete('channels',['data','isLoading'])   //channnels 为命名空间的名字，数组为读取属性
   create的（）{
　　　　this.$store.commit('channels/setIsLoading'，true)      //提交一个mutation

　　}
}
</script> 

注释：
如果还有其他计算属性（es6属性展开运算符）
computed：{
    ...mapStete('channels',['data','isLoading']) ,
    data(){
     return 123
    }
}
例：
var obj = {
　　a:1,
　　b:2,
}
var newObj = {
　　...obj,
　　c:3
}   
输出结果为{a:1,b:2,c:3}