vueX的使用

vueX是跨组件通信, 创建全局对象,定义了对象的存取规则 , 当对象的属性发生改变的时候 , 所有依赖他的组件都会更新

1,先安装  npm install vuex --save-dev

2,新建一个store文件夹（,一般大家都这样命名写在项目文件夹里），并在文件夹下新建store.js文件，文件中引入我们的vue和vuex。

3

import Vue from 'vue' //加载vue
import Vuex from 'vuex' //引入vuex
Vue.use(Vuex) //使用他

4、在main.js 中引入新建的vuex文件

5,然后就是在配置你需要的东西

const store = new Vuex.Store({  //创建一个store
       state : {   //用来存放数据的对象
           title: '卖座电影',   //头部页面的初始值
           //其他需要存放的东西可以继续放下面
           // xxx : xxx
           status : false
       },
       
       getters : {   //用来取数据
           title : state => state.title,//取值方式 es6的语法  箭头函数的简写
           status : state => state.status
       },
       
       mutations : {  //用来存数据  修改state
           updateTile :(state , payload) => {  //payload传入的数据
               state.title = payload;  //修改title值
           },
           optionBtn :(state , payload) => {  //payload传入的数据
               state.status = payload;  
           },
       },
       actions : {  //规范写法
           updateTile :({commit},payload) => {
               commit('updateTile',payload)
           }
       }    
//    modules :{
//        login :login
//    }
 }); 
 export default store; //导出

6,在组件里取出我们在state里面定义的动态值 先在组件里面引入

import { mapState  } from 'vuex'

　　

computed : {  //技算器方法  
            //...es6的语法把store的东西全部取出来
            ...mapState(['title']),//获取sstore里面的title , 要是还有
            ...mapState(['status'])
        },

通过{{}}渲染到页面,

7,改变他,如果其他组件改变了他,那你这个组件拿的也是另外一个组件改变的内容

this.$store.commit('updateTile',res.film.name);//通过$store.commit(''updateTile', '你要改变的内容,可以静态可以动态')

vueX的用途很广, 登录状态的处理 , 还有一些固定的页面跳转后头部要显示跳转页面里面的内容 , 出来后又要显示以前的 ,.....

vuex持久化 刷新页面数据还在

npm install vuex-persistedstate  --save

　再store的index.js里面配置

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

import createPersistedState from "vuex-persistedstate" //引入持久化

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        login:false,
        
    },
    getters:{
        login : state => state.login,

    },
    mutations : {
        updateLogin : (state , payload) => {
            state.login = payload
        }
    },
    plugins: [createPersistedState()]   //使用持久化
})

export default store;

　　

this.$store.state.login