vue 노트 Vuex

먼저 문서의 자신의 이해를 올리면, 바로 약간의 데이터를 저장하여 호출하기 편리하다는 것이다.
설치 방법
npm install vuex --save-dev
그것은 반드시 플러그인으로 인용해야 한다
import Vuex from "vuex"; Vue.use(Vuex);
사용법

index.js  

const vuex_store=new Vuex.Store({
    state:{
        user_name:"",
    },
    mutations:{
        showUserName(state)
        {
            alert("    "+state.user_name)
        }
    },
})

username.vue  
userNameChange      
  this.$store.state.user_name=this.username;

vuex 정의const vuex_store=new Vuex.Store({})
응용 단계의 상태는 store에 집중되어 있습니다.
속성 추가

 state:{
        user_name:"",
    },

상태를 바꾸는 방법은mutations를 제출하는 것입니다. 이것은 동기화 업무입니다.
방법

  mutations:{
        showUserName(state)
        {
            alert("    "+state.user_name)
        }
    },

비동기 논리는 액션에 봉인되어야 한다.
잠시 사용하지 않음
여기서 저희가 user 를 정의했습니다.name
이 속성에this.$값을 부여합니다store.state.user_name=this.username; 호출 showUserName 방법this.$store.commit("showUserName");
일부 데이터는 우리가 한 번만 요청하고 그것을 저장하는 것이지, 매번 페이지에 들어갈 때마다 새로 고침하는 것이 아니다

index.js    
 state:{
        user_name:"",
        newsList:[]
    },
newlist.vue    

  export default{
        created(){
            if(this.$store.state.newsList.length == 0 ){
                this.$http.post("http://  /newslist.php").then(function (res) {
                    console.log("         ")
                    this.$store.state.newsList =  res.body
                },function (r) {
                    console.log(r)
                    console.log("    ")
                })
            }
        }
    }

이 인터페이스에post만 허용되므로 post 요청을 사용하십시오

newslist.php     

（     preverify）          ","isshow":true},  {"newsid":"102","pubtime":"2016-10-01","title":"              ","desc":"           ，                  ？          ？           ? ","isshow":false},{"newsid":"103","pubtime":"2016-09-28","title":"BitBucket Cloud  Git     Beta   ","desc":"Git LFS                        ，> Git               ","isshow":true},{"newsid":"104","pubtime":"2016-09-30","title":"    ，   、         ","desc":"                  《  》，                            ，           ","isshow":true}]';

header('Content-Type:application/json; charset=utf-8');
exit($res);

크로스 요청을 허용하고 json 형식으로 되돌려줍니다.utf-8 인코딩 되돌려주기 newsListthis.$store.state.newsList = res.body 위쪽 템플릿 순환에서 데이터 원본을 고쳐야 합니다

v-for="news in this.$store.state.newsList"

새로운 요구 사항은 isshow 속성에 따라 이 데이터의 표시 여부를 판단합니다

index.js    
 getters: {
        getNews(state){
            return state.newsList.filter(function (news) {
                return news.isshow;
            })
        }
    }

newslist.vue    
v-for="news in this.$store.getters.getNews"

새로운 요구 사항 상세 정보 페이지 요구 사항에 대한 좋아요를 누를 수 있습니다.
사실 하나의 데이터를 요청하여 인터페이스에 갱신하는 것이다

index.js    
agree   ,    ,  newsid  id            
context       setAgree         agree  
 mutations:{
        setAgree(state,agreeNum)
        {
            state.newsdetail.agree=agreeNum;
        }
    },
    actions:{
        agree(context,_newsid)
        {
            //    ajax  ，       agree     
            Vue.http.post(
                "http://aleen.sololi.net/news.php",
                {newsid:_newsid},{emulateJSON:true}
                ).then(
                    function(res){
                        context.commit("setAgree",res.body.agree)
                    },function(){
                }
                )
        }
    },

newsdetail.vue     
            news         state  
             agree    ,     newsid    
this.$store.dispatch    index     
  created()
        {
            this.$http.get("  /news.php?newsid="+this.$route.params.newsid)
                    .then(function(res){
                        this.$store.state.newsdetail=res.body
                        console.log(res);
                    },function(rs){
                        console.log(rs)
                        console.log("    ")
                    })
        },
        methods:{
            submitAgree()
            { this.$store.dispatch("agree",this.$store.state.newsdetail.newsid)
            }
        }
    }

로그인 및 뉴스 모듈 분리
모든 모듈을 한 파일에 써서 이 파일이 너무 커서 관리하기 불편하기 때문에 분리해서 문서를 보십시오
쉽게 말하면 index를.jsconst vuex_store=new Vuex.Store({를 아래 내용으로 바꾸고user 관련 코드를 ./../store/modules/UserModules"의news 관련 코드로 이동./../store/modules/NewsModiles

import  UserModule from "./../store/modules/UserModules"
import  NewsModule from "./../store/modules/NewsModiles"
const vuex_store=new Vuex.Store({
    modules: {
        users: UserModule,
        news: NewsModule
    }
})

그러나 이동이 끝난 후에 페이지가 잘못 보고되었거나 표시되지 않았습니다. .vue 파일에서this.$store.state.user_name = this.username;에서 this.$로 교체store.state .users. user_name = this.username; 대응하는modules 이름을 추가하면 됩니다